アコーディオンをパッと作成したい人

よくあるアコーディオンを作成したいけど、使い回しやすい良いサンプルないかな?

しんぺー
コピペで使い回しやすいサンプルを置いておきますね。
完成形のイメージ
少し装飾していますが、このコードをベースにボックスの装飾や、アイコンの変更、フォントの調整など使いまわしやすいかもしれません。
See the Pen Untitled by shimpei (@shimpei) on CodePen.
HTML
こんな感じです。
もっと少ないタグでできそうですが、見やすいかなと思ってこんな感じにコーディングしてみました。
<ul class="accordion-list"> <li> <dl> <dt class="acc-ttl">アコーディオン</dt> <dd class="acc-txt">ここにテキストが入ります。ここにテキストが入ります。</dd> </dl> </li> </ul>
SCSS
ちょっと長いですが、こんな感じです。
ul.accordion-list { // リスト間の余白調節(フクロウセレクタ) >*+* { margin-top: 10px; } >li { border: 1px solid #000; padding: 0px 30px; @media only screen and (max-width: 768) { padding: 0 20px; } } .acc-ttl { font: { size: 16px; weight: bold; } line-height: 2; letter-spacing: .05em; cursor: pointer; padding: 23px 25px 23px 0; position: relative; @media only screen and (max-width: 768) { padding: 13px 25px 13px 0; } // アイコン CLOSE(アコーディオンが閉じている時) &::before { position: absolute; content: "\f067"; // 「+」プラスのアイコン top: 50%; transform: translateY(-50%); right: 0; font: var(--fa-font-solid); font: { weight: 900; size: 20px; } @media only screen and (max-width: 768) { font-size: 16px; } } // アイコン OPEN(アコーディオンが開いた時) &.active { border-bottom: 1px solid #000; &::before { content: "\f068"; // 「-」マイナスのアイコン } } } .acc-txt { font-weight: 500; padding: 26px 0 23px; line-height: 2; letter-spacing: .05em; display: none; } }
jQuery

jQueryの.slideToggle()
で開閉をしています。
それだけでもいいのですが、アコーディオンはよく開閉時にアイコンが変わるので、.toggleClass
でその動きを実現しています。
上のSCSSのコードで赤く記している箇所です。
toggleClass
で.active
のクラスを付け外し.active
のクラスがついた時は、CSSでアイコンを変更
<script> $(function () { $(".acc-ttl").on("click", function () { $(this).next(".acc-txt").slideToggle() // .acc-txtをオープン $(this).toggleClass("active"); // .acc-ttlに.activeのクラスを追加(.activeのクラスの時にCSSでアイコンを変更しています。) }) }); </script>
最後に

今回は以上です。
どうでしょうか参考になったでしょうか。
何度か作成すると、この記事を参照せずともコーディングできるようになるかもしれません。
この記事があなたの助けになっていれば幸いです。
最後までありがとうございました。