アコーディオンでおしゃれなQ&Aを作ってみる
今回のテーマ。
『transitionで簡単なアニメーションをつけてみるのがいいと思います。』
See the Pen
【jQuery】アコーディオンでおしゃれなQ&Aを作ってみる by 125naroom (@125naroom)
on CodePen.
HTML
<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
/*========= accordion =========*/ .accordion_area {} .accordion_area .accordion_one .ac_header { background-color: #ffffff; border: 1px solid #ccc; padding: 1.5rem 4rem 1.5rem 2rem; position: relative; z-index: +1; cursor: pointer; transition: .2s; } .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: 2rem; 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: .3s; } .accordion_area .accordion_one .ac_header.open .i_box:after { height: 0; } .accordion_area .accordion_one .ac_inner { display: none; padding: 1.5rem 2rem 1.5rem 2rem; 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
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
$(function(){ $('.accordion_one .ac_header').click(function(){ $(this).next('.ac_inner').slideToggle(); $(this).toggleClass("open"); }); });
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。