WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >html

初めてアコーディオンメニューを実装しようとした時、CSSやJSを使用して混乱しませんでしたか？
メニューやよくある質問ページなどで活躍するアコーディオンメニューが、HTMLだけで実装することができます。

※IEは未対応ですので、ご注意ください。

使用方法

アコーディオンメニューにしたい部分をdetailsタグで囲い、summaryタグで囲った見出しと、本文を入れ込むだけでとても簡単です。

<details>
    <summary>見出しをクリック</summary>
    内容がここに入ります。
</details>

サンプル

見出しをクリック

内容がここに入ります。

detailsとsummaryタグとは

details

detailsタグで囲んだ部分がアコーディオンメニューになります。

summary

detailsタグの最初の子要素として見出しに使用されますので
最初から表示させておきたい部分を囲みます。 summaryタグの部分をクリックすると、詳細文が表示されます。

ポインターを変更

このままだとカーソルがテキスト選択になります。
CSSでリンクをクリックできることが分かるように変更しましょう。

summary {
  cursor: pointer;
}

サンプル

見出しをクリック

見出しのポインターが変更されています。

矢印を変更

デフォルトは、サンプルのように黒い三角がアイコンとして表示されます。
この三角を消すには、FirefoxとChrome, Safariでは方法が違いますので下記のように記述します。

Firefoxの場合

details summary {
  list-style: none;
}

Chrome, Safariの場合

details summary::-webkit-details-marker {
  display: none;
}

三角を消したら、「Font Awesome」を使用し、summaryタグにアイコンを装飾します。
閉じている時はプラス、開いている時はマイナスとする場合は以下のように記述してください。

閉じている時

details summary::before {
  font-family: FontAwesome;
  content: '\f067';
  margin-right: 20px;
}

開いている時

details[open] summary::before {
  content: '\f068';
}

開いている時の装飾はdetailsの後に[open] を記述することで反映されます。

まとめ

残念ながらIEは未対応ですが、対応させるためのスクリプトもあるので、ぜひ一度試してみてください。
details-polyfill