CSS3でアコーディオン・トグル

CSS3でアコーディオン・トグル

CSSのチェックボックスを使って、JavaScriptに依存せずにアコーディオン・トグルを実装する簡単なサンプルコードを記述してます。

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

アコーディオン・トグル

<input>タグのtype属性を”checkbox”に指定します。
動きの基本となるcssは以下の3つだけです。

サンプルコード

以下は実際に、アコーディオン・トグルを実装したサンプルコードとなります。

ブラウザ上で表示した結果

ラベル1の内容をここに記述します。
ラベル2の内容をここに記述します。
ラベル3の内容をここに記述します。