アコーディオンメニューをHTMLとCSSで実装する方法

アコーディオンメニューはWeb制作をする上で良く利用される表現です。

メニューの展開などの動きを付与するにはこれまで jQueryなどで表現することが一般的かと思われます。ただ、簡単なあしらいであればHTMLとCSSのみで実装することが可能です。

1. details, summary タグ
2. open属性によるメニューの展開
3. アニメーションの付与

details, summary タグ

使い方は簡単でアコーディオンを設定したい箇所をdetailsタグで囲み、展開させる前に表示させたい項目をsummaryタグで囲むだけです。

<details>
  <summary>What's HTML Accordion?</summary>
  You can make Accordion menue with only HTML.
</details>

これだけで基本的なアコーディオンの機能は成立します。

open属性によるメニューの展開

任意のメニュー項目を予め展開させておきたい場合はopen属性をdetailsタグに付与します。CSSを適用する際には "details[open]" の形で指定します。

<details open>
  <summary>Opened Menue</summary>
  You just need to add "open" attribute.
</details>

アニメーションの付与

展開時にアニメーションを付与したい場合はCSSで "transition" プロパティを指定します。

details {
  transition: .7s;
}

以上でHTML, CSSのみでアコーディオンを実装できました。対応ブラウザーが少し弱いところもあるようですが、スクリプトで補填できるようです。

codepen.io