cssカスタマイズ

◆最初は開いていてクリックで閉じる


◆html
<div>
<label for="kaihei1">見出し</label>
<input type="checkbox" id="kaihei1" class="kaihei" checked="checked">
<div class="kaihei">本文</div>
</div>

◆最初は閉じていてクリックで開く


◆html
<div>
<label for="kaihei2">見出し</label>
<input type="checkbox" id="kaihei2" class="kaihei">
<div class="kaihei">本文</div>
</div>

◆注意
・<label>のforの属性値と<input>のidの属性値を同じにする
・同じページで複数のパネルを使う場合は属性値を変える
　　<label for="kaihei1"><input id="kaihei1">
　　<label for="kaihei2"><input id="kaihei2">
　　<label for="kaihei3"><input id="kaihei3">
　　<label for="kaihei4"><input id="kaihei4">
　　<label for="kaihei5"><input id="kaihei5">

◆css
.kaihei{display:none;}
input:checked~.kaihei{display:block;}

◆簡易版と詳細版のメリットとデメリット

	メリット	デメリット
簡易版	labelのforもinputのidも不要	本文をクリックしても閉じる
詳細版	本文をクリックしても閉じない	パネルごとにforとidの属性値を 変えなければならない

※簡易版はこちら