アコーディオンをhtmlとcssだけで作る方法

HTML/CSS

htmlのチェックボックスを使ってhtmlとcssだけでアコーディオンを作る方法

クリックで開閉するアコーディオンをhtmlとcssだけで実装する時の記述方法を紹介します。
下の記述例では「質問と回答」を想定したアコーディオンを作ってみました。
チェックボックスのチェックの有無でアコーディオンの中身の表示/非表示を切り替え、合わせてcssの擬似要素を使って矢印の表示も切り替えています。

See the Pen
ZEGLLrq
by saku (@web-saku)
on CodePen.

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください