

アコーディオンでおしゃれなQ&Aを作ってみる
今回のテーマ。
transitionで簡単なアニメーションをつけてみる。
HTMLとCSSとjQueryはこちら
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < div class = "accordion_area gutter" > < div class = "accordion_one" > < div class = "ac_header" > < div class = "p-faq__headinner" > < p class = "p-faq__q-txt" >テキストテキスト?</ p > </ div > < div class = "i_box" ></ div > </ div > < div class = "ac_inner" > < div class = "p-faq__bodyinner" > < p class = "p-faq__a-txt" >テキストテキストテキストテキストテキストテキストテキストテキスト</ p > </ div > </ div > </ div > </ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | /*========= accordion =========*/ .accordion_area {} .accordion_area .accordion_one .ac_header { background-color : #ffffff ; border : 1px solid #ccc ; padding : 1.5 rem 4 rem 1.5 rem 2 rem; position : relative ; z-index : + 1 ; cursor : pointer ; transition : . 2 s; } .accordion_area .accordion_one .ac_header:not(.open):hover { background-color : #f1f8ff ; } .accordion_area .accordion_one:nth-child(odd) .ac_header { background-color : #f5f5f5 ; } .accordion_area .accordion_one:nth-child(odd) .ac_header:not(.open):hover { background-color : #f1f8ff ; } .accordion_area .accordion_one .ac_header .i_box { position : absolute ; top : 50% ; right : 2 rem; width : 20px ; height : 20px ; margin-top : -10px ; } .accordion_area .accordion_one .ac_header .i_box:before, .accordion_area .accordion_one .ac_header .i_box:after { position : absolute ; content : "" ; margin : auto ; box-sizing : border-box ; vertical-align : middle ; } .accordion_area .accordion_one .ac_header .i_box:before { border-top : 2px solid #014897 ; width : 20px ; height : 0 ; top : 0 ; bottom : 0 ; right : 0 ; } .accordion_area .accordion_one .ac_header .i_box:after { border-left : 2px solid #014897 ; width : 0 ; height : 20px ; top : 0 ; bottom : 0 ; right : 9px ; transition : . 3 s; } .accordion_area .accordion_one .ac_header.open .i_box:after { height : 0 ; } .accordion_area .accordion_one .ac_inner { display : none ; padding : 1.5 rem 2 rem 1.5 rem 2 rem; border-left : 1px solid #ccc ; border-right : 1px solid #ccc ; border-bottom : 1px solid #ccc ; box-sizing : border-box ; background : #fff ; } /*========= faq =========*/ .p-faq__headinner { display : block ; padding-left : 35px ; position : relative ; line-height : 1.5 ; } .p-faq__headinner::before { position : absolute ; left : 0 ; content : "Q." ; color : #09357f ; font-size : 20px ; font-weight : bold ; } .p-faq__headinner p.p-faq__q-txt { font-size : 20px ; } .p-faq__bodyinner { display : block ; padding-left : 35px ; position : relative ; line-height : 1.5 ; } .p-faq__bodyinner::before { position : absolute ; left : 0 ; content : "A." ; color : #de0000 ; font-size : 20px ; font-weight : bold ; } .p-faq__bodyinner p.p-faq__a-txt { font-size : 20px ; } |
jQuery
1 2 3 4 5 6 | $(function(){ $( '.accordion_one .ac_header' ).click(function(){ $(this).next( '.ac_inner' ).slideToggle(); $(this).toggleClass( "open" ); }); }); |
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。
さいごに

