HTML・CSSだけでアコーディオンを作る

tecmemo2009
こんにちは、クリエイターズメモです。

 

ページが長くなりそうなとき、開閉できるコンテンツ(以下、アコーディオン)を作りたいと思うときってありますよね。

 

ですが「作るの大変そう」、「作れるけど面倒」、「そもそもjavascriptとかよくわからない」などと思ってしまう方も多いかと思います。

 

なので今回はjavascriptを使用しないでさくっとHTML・CSSだけでアコーディオンを作る方法を紹介します。

 

方法は他にもありますが、これが一番簡単な方法だと思います。

 

まず注意点としてこの方法はIEに対応していません、IEでは最初から開いている状態となってしまいます。
以下、対応ブラウザをご確認ください。

 

対応ブラウザ(Can I use…)

 

現状ではIE以外のブラウザはほぼサポートされています。

 

では実装していきます。まずは完成したDEMOをご覧ください。

 

DEMO

 

必要な部分のソースは以下となります。

 

■HTML

アコーディオンにしたい部分を<details>で囲います。
そして、閉じているときに見せたい部分を<summary>で囲います。

 

なんとこれだけ!あとは簡単にCSSで装飾してみたいと思います。

 

■CSS

 

このような感じにしてみました。IEさえ無視してしまえばこんな簡単な方法でも実装できます。
ただ、IE11のサポートがすべて終わるのはかなり先の話ですね。

 

IEに対応させるためのプラグインもいくつかあるみたいなので、必要な方はそちらも合わせてご利用ください。

 

以上、クリエイターズメモでした。

HTML・CSSだけでアコーディオンを作る はコメントを受け付けていません
  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。