アコーディオンをhtmlとcssだけで作る方法
htmlのチェックボックスを使ってhtmlとcssだけでアコーディオンを作る方法
クリックで開閉するアコーディオンをhtmlとcssだけで実装する時の記述方法を紹介します。
下の記述例では「質問と回答」を想定したアコーディオンを作ってみました。
チェックボックスのチェックの有無でアコーディオンの中身の表示/非表示を切り替え、合わせてcssの擬似要素を使って矢印の表示も切り替えています。
See the Pen
ZEGLLrq by saku (@web-saku)
on CodePen.
Ads
おすすめの書籍紹介
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す