HTMLのdetails・summaryタグだけでアコーディオンを実装する

details・タグでアコーディオンを実装する

これまでアコーディオンを実装する際はCSSやJQueryを主に使用してきましたがもっと楽な実装方法がないか調べていた時に見つけたHTML5から登場したタグです。
余程古いバージョンでない限り殆どの主要ブラウザで使用することができます。

具体例

index.html

<details>
  <summary>ボタン</summary>
  折り畳まれている部分
</details>

ボタン

折り畳まれている部分

上記だけでアコーディオンを実装することができます。また、detailsタグに「open」属性をつけるとはじめから開封した状態にすることも可能です。
トランジションはついておりませんので、別途jsで実装する必要があります。

また、summaryの「-webkit-details-marker」により初期状態から矢印が表示されており、こちらは以下のCSSで非表示にすることができます。

style.css

/* Chrome、Safari */
summary::-webkit-details-marker {
  display: none;
}