アコーディオンメニューはjqueryやJavaScriptで作成する方法もありますが、今回はHTMLのみでアコーディオンメニューを作成する方法を紹介します。
Webページおけるナビゲーションメニューのひとつで、選択した項目がその場で広がり、隠れていた詳細内容を表示するメニューのこと。限られた範囲で多くの項目を一覧表示することが可能なため、利便性が高い。
では、実際にHTMLだけで、書くとどうなるか。例示の「Result」の中の「Run Pen」をクリックした後、「常に表示させておく項目」をクリックしてください。
See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.
<details>
<summary>常に表示させておく項目</summary>
<p>ここに項目に対する内容などを記述する</p>
</details><details>タグで囲んだ箇所がアコーディオンになります。<summary>タグの中に、常に表示させておきたい項目を記述します。
<summary>タグの下に、項目に対する内容（隠したい内容）を記述します。これで、例示のようなアコーディオンメニューができます。
矢印もデフォルトでありますが、矢印や全体のデザインを変えたい場合はCSSで変更することが可能です。
次回、「簡単！ HTMLだけでアコーディオンメニューを作成する方法②」で、このデザイン変更の方法について解説します。
※2024/5/16追記 JQuery不要 HTMLだけで、アコーディオンの開閉を連動させる方法も追加しました。合わせてこちらもご覧ください。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
