CSSすら不要!htmlの「detailsタグ、summaryタグ」でアコーディオン

CSSすら不要!htmlの「detailsタグ、summaryタグ」でアコーディオン

HTML5から追加されてる detailsタグ、summaryタグを使えばcssも使用せずhtmlの記述だけで簡単にアコーディオンや折りたたみメニューを作ることができます。
ほとんどの主要ブラウザで使用できますが、IEには対応していません。

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

detailsタグ、summaryタグ

HTML5から追加されてる detailsタグ、summaryタグを使えばcssも使用せず簡単にアコーディオンや折りたたみメニューを作ることができます。
detailsタグで囲んだ部分がアコーディオンとして設定されます。
summaryタグはアコーディオンの見出し部の役割をしますが、summaryタグがなくてもアコーディオンの動きをします。
ほとんどの主要ブラウザで使用できますが、IEには対応していません。

サンプルコード

detailsタグとsummaryタグを使用するだけで実装できますが、cssを加えて少しカスタマイズしています。

アコーディオンのタイトル

アコーディオンの内容
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.