【サンプル10選】コピペで実装できるアコーディオンメニュー

【HTML】シンプルなアコーディオンを実装する

detailsタグ・summaryタグを使用すると、HTMLのみだけでアコーディオンの開閉を実現することができます。
タグについての詳細は＜ htmlのdetailsタグとsummaryタグでアコーディオンメニューを実装するメリット ＞をご覧ください。

detailsタグにopen属性を指定することで、はじめから開いた状態のアコーディオンを作成することも可能です。

【HTML/CSS】ホバー時・タブフォーカス時のスタイルを変える

ホバーやタブフォーカス時のスタイルを変えることで、アコーディオンメニューの開閉状態をより明示的に示すことができます。
ホバー時は「:hover」、タブフォーカス時は「:focus-visible」擬似クラスを使用して、スタイルを変更しました。タブフォーカスはクリック時に動作させたくないので、今回は「:focus-visible」を使用しています。

【HTML/CSS】アコーディオンの矢印をカスタマイズする

detailsタグ・summaryタグを使用すると、デフォルトで矢印が表示されます。この矢印はCSSを使用して、削除したり、アイコンや画像を設定したりすることができます。
矢印をカスタマイズすることで、アコーディオンのデザイン性が上がり、よりご自身のWebサイトにマッチするようになるでしょう。

今回は、以下の3パターンでデフォルトの矢印アイコンをカスタマイズしました。
1つ目のアコーディオンのタイトルは、CSSのみでアイコンをカスタマイズしています。
2つ目のアコーディオンのタイトルは、画像を使用してカスタマイズしています。
※画像は、SVGの文字データを設定しています。imageフォルダにjpeg、pngの画像を格納し、パスを指定することで表示することも可能です。その際はご自身の環境に併せてファイルパスを設定してください。 例：background: url( ../image/XXXX.png );
3つ目のアコーディオンのタイトルは、Webフォントアイコンを使用してカスタマイズしています。

【HTML/CSS】アコーディオンの開閉をスムーズにする

アコーディオンの開閉がスムーズにみえるよう、JavaScriptを使用せずにCSSのみで調整しました。デフォルトのカクカクした挙動が気になる方、よりアコーディオンの見栄えを良くしたい方は、参考にしてみてください。
今回は2つのパターンで実装してみましたが、どちらも一長一短なので状況に合わせてご利用ください。

open前とopen後の状態をtransitionを利用し0.3秒で遷移させることで、アコーディオンのスムーズな動きを実装しています。
open前のアコーディオン（「.details」）にネガティブマージンをつけ、アコーディオンタイトル（「.details-summary」）にtransformYで下に移動させておきます。これによりアコーディオンのコンテンツ（「.details-content」）が、アコーディオンタイトル（「.details-summary」）の下に入り込みます。open後のアコーディオン（「.details」）よりネガティブマージン、アコーディオンタイトル（「.details-summary」）のtransformYの設定を削除し位置も戻します。
ネガティブマージンを使用しており、余白調整などがあまり間隔的ではありませんので注意してください。

アコーディオン（「.details」）をopenする前の高さとopen後の高さを指定し、transitionでスムーズに動くようにしました。
アコーディオン（「.details」）の高さをを固定しているため、テキスト量が増えた場合は表示崩れをしてしまいます。その防止策としてアコーディオンの中身（「.details-content」）にも高さを指定し「overflow: hidden;」と「overflow-y: auto;」を設定しました。テキスト量が指定した高さを越した場合はスクロールするようにしています。また、アコーディオン（「.details」）の開閉に合わせて、アコーディオンの中身（「.details-content」）を表示するようにするため、animationでフェードインさせています。
ただし、detailsタグ内のコンテンツ（今回でいうと「.details-summary」）へanimationやtrainsitionの設定は少し不安定になります。

【HTML/CSS/jQuery】アコーディオンの開閉をスムーズにする

アコーディオンの開閉がスムーズになるよう、jQueryを使用して調整しました。CSSのみで調整していた時と比べ、より安定した動作を実現することができます。

【HTML/CSS/jQuery】1つ開くと、他は閉じるアコーディオンを実装する

1つ開くと、他のコンテンツは閉じるアコーディオンです。自動で他のコンテンツをクローズすることで、コンテンツを閉じる手間が減ります。

【HTML/CSS/jQuery】アコーディオンの閉じるボタンを複数設置する

アコーディオンのコンテンツ内にも閉じるボタンを設置しました。アコーディオンのコンテンツが長い場合に実装すると、閉じる時にコンテンツ上までスクロールせず済みます。

【HTML/CSS/jQuery】多階層なアコーディオンを実装する

大量の情報を扱う場合に便利な多階層のアコーディオンです。jQueryの設定は【HTML/CSS/jQuery】アコーディオンの開閉をスムーズにすると同じです。

【HTML/CSS/jQuery】ホバーで開閉するアコーディオンを実装する

ホバーで開閉することで、必要な情報に、より迅速にアクセスできるようになります。アコーディオンをホバーで開閉するために、mouseenter・mouseleaveを使用して調整しています。

【HTML/CSS/jQuery】画像をホバーして開閉するアコーディオンを実装する

画像をホバー後、画像中央にコンテンツが表示されるアコーディオンです。狭いスペースでも画像を目立たせたい時におすすめです。summaryタグに画像を配置し、CSSでホバーしたら横に伸びるように、jQueryでコンテンツを時間差で開くよう設定して、動きを実現しています。