【jQuery】アコーディオンでおしゃれなQ&Aを作ってみる
- 2021.9.1
- jQuery


おしゃれなQ&Aを作りたいのですよねー

こんなんどうでしょー
アコーディオンでおしゃれな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の日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。
さいごに

おー、シンプルでいいですねー

さ、コーヒータイムにしましょー
関連記事
おすすめ
かんれん
- web / 2023.2.22
- 【CSS】Webフォントのちらつきをなくす方法
- web / 2020.10.28
- 【CSS】注釈(※、*1)を記載するときのインデント合わせ(頭合わせ)
- web / 2018.9.3
- 【CSS】セレクタまとめ、最初・最後・奇数・偶数・何番目
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.12.08New
- 信州アップルパイ研究所_Q
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.11.30
- 【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える
- 指定した場所で出したいのですよー そして指定した場所で消したいのですねー もくじ 実…
- 125naroom / デザインするところ(会社)です。