Weblasts

cssだけで作れる!アコーディオンの実装方法

cssだけでアコーディオンを実装

jsで当たり前のように作っていた、アコーディオンもchecked疑似クラスと~を組み合わせたセレクタを使用すれば、cssだけで作れてしまうので紹介します。

少ないcssで実装できるので、あまりchecked疑似クラスと~の組み合わせを使ったことがない人でも理解しやすいと思います。

今回実装するもの

色々なサイトのよくある質問とかで使われているコンポーネントがアコーディオンです。

質問内容が書かれたラベル部分をクリックすると、答えが出てくるような仕組みです。

サンプル
はい!アコーディオンです。
cssで動かしているアコーディオンです。

アコーディオン用HTMLの準備

アコーディオンはコンポーネントをひとつひとつ用意するような形でマークアップしてみました

div要素の中にチェックボックスとdl・dt・dd要素を兄弟になるように配置し、dt要素の中にlabel要素を仕込みました

アコーディオン用のcss

cssは矢印やそのアニメーションがあるので長く感じるかも知れませんが、実際にアコーディオンを動かしている部分は、かなり少ない行数で収まります。

一つ注意点があり、「height:0」から「height:auto」とすると、高さの変化にアニメーションがつかないので、ぱきっと出てくる様になってしまいます。

ここで紹介しているものは、paddingを上下につけることでアニメーションぽくしていますが、きれいにアニメーションさせたいのであれば、heughtはautoではなく絶対値を指定する必要があります

最近~とchecked疑似クラスの記事ばかり書いていて飽きてきたしネタ切れなので、当分の間他の記事を書きます。