【CSS】チェックボックスで表示・非表示

せっかく作ったのですが、使う機会がなかったので、今後使うかもしれないってことでまとめました。

メニュー あいうえお、かきくけこ

さしすせそ

htmlは下記のようにしております。forの相手をチェックボックスを指定します。
表示や非表示にしたい内容にもlabel指定でforを指定しています。

<label id="lbl_xxx" for="chk_xxx">メニュー</label>

<input id="chk_xxx" type="checkbox">

<label id="content_xxx" for="chk_xxx">

あいうえお、かきくけこ<br>

さしすせそ

</label>

CSSの設定は下記のようにします。

#lbl_xxx{border:solid 1px #203C1B; padding:10px;}
#chk_xxx{display:none;}
#chk_xxx:checked ~ #content_xxx{  display: block;}
#content_xxx{display: none;background: #EEEEDD; padding:10px;}

ラベル『content_xxx』をクリックすると閉じるようになります。

関連記事