アコーディオンメニューの実装

2023.08.15 アコーディオンメニューの実装

はじめに

概要

一般的なウェブサイトでよく見かけるアコーディオンメニューを制作します。ウェブサイト内のQ&Aセクションなどでよく使用される、情報をアコーディオン形式で表示する仕組みを導入します。※なお、必須ではございませんが、tailwind.cssとScssを活用して構築しております。まだこれらを利用したことがない方は、ぜひ取り入れてみてください。tailwind.cssに関する詳細はこちら、Scssに関する詳細はこちらからご確認いただけます。

目的

実装動画
構築方法
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

実装動画

最初のメニューは展開された状態で表示されています。以下で具体的な実装方法について説明していきます。

サンプルコード

サンプルコードはこちらからダウンロードできます。

構築方法

様々な構築方法はありますが、こちらではJavascriptは使用せずにCssで完結したいため、inputタグのcheckboxを用いています。inputタグのidとlabelタグのfor属性を結びつけることで、CSS内でクリックイベントを制御することが可能です。サンプルコードでは、疑似要素や複雑なクリックイベントのコードはScssで簡潔に記述し、その他の部分ではtailwindが提供するクラスを活用しています。

checked=”checked”

HTML

<input type="checkbox" id="inputToggle" class="hidden accordion__toggle" checked="checked" />

チェックボックスは表示されないようになっていますが、クリックイベントは引き続き有効です。また、inputタグの属性であるchecked=”checked”を使用することで、初めからチェックされた状態で表示することができます。

Scss

.accordion {
  &__toggle {
    &:checked+.accordion__ttl+.accordion__content {
      max-height: 500px;
      margin-bottom: 15px;
      transition: max-height 1.5s;
    }

    &:checked+.accordion__ttl::before {
      transform: rotate(90deg) !important;
      background-color: #707070;
    }

    &:checked+.accrdion::after {
      background-color: #707070;
    }
  }
}

このコードでは、チェックボックスが選択された場合の動作について記述されています。また、.accordion__ttlクラスは疑似要素の:beforeと:afterを使用して、プラスボタン（+ボタン）を表示しています。通常はプラスを表示し、クリックすると回転を利用してマイナス（-ボタン）に変化するように調整されています。

まとめ