cssカスタマイズ

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

××をクリックで閉じる　クリックで開く

あんたがたどこさ　肥後さ
肥後どこさ　熊本さ
熊本どこさ　船場さ
船場山には狸がおってさ
それを猟師が鉄砲で撃ってさ
煮てさ　焼いてさ　食ってさ
それを木の葉でちょいとかぶせ

◆html
<form>

---

<label>
<input type="radio" name="kaihei" class="kaihei"><span class="hei">×</span>
</label>

---

<label>
<input type="radio" name="kaihei" class="kaihei" checked="checked"><span class="kai">見出し</span>
<div class="kaihei">本文</div>
</label>

---

</form>

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

×クリックで開く　×をクリックで閉じる

通りゃんせ　通りゃんせ
ここはどこの細通じゃ
天神さまの細道じゃ
ちっと通して下しゃんせ
御用のないもの通しゃせぬ
この子の七つのお祝いに
お札を納めにまいります
行きはよいよい　帰りはこわい
こわいながらも
通りゃんせ　通りゃんせ

◆html
<form>

---

<label>
<input type="radio" name="kaihei" class="kaihei"><span class="hei">×</span>
</label>

---

<label>
<input type="radio" name="kaihei" class="kaihei"><span class="kai">見出し</span>
<div class="kaihei">本文</div>
</label>

---

</form>

◆css
.kaihei{display:none;}
input:checked~.kaihei{display:block;}
.kai,.hei{background-color:black;color:white;padding:5px;border-radius:5px;display:inline-block;}
.kai{width:100%}
form{position:relative;}
.hei{position:absolute;top:0;right:0;}