cssカスタマイズ

◆最初は一つだけ開いている

クリックして開く　他をクリックして閉じる

いろはにほへと
ちりぬるをわか
よたれそつねな
らむうゐのおく
やまけふこえて
あさきゆめみし
ゑひもせす

クリックして開く　他をクリックして閉じる

祇園精舍の鐘の声　諸行無常の響きあり
娑羅双樹の花の色　盛者必衰の理をあらわす
奢れる人も久しからず　ただ春の夜の夢の如し
猛き者もついには滅びぬ　ひとえに風の前の塵に同じ

クリックして開く　他をクリックして閉じる

日出處天子致書日沒處天子無恙云云

日出ずる処の天子
書を日没する処の天子に致す
恙無きや

クリックして開く　他をクリックして閉じる

寿限無　寿限無
五劫の擦り切れ
海砂利水魚の
水行末　雲来末　風来末
食う寝るところに住むところ
薮ら柑子の薮柑子（やぶらこうじのぶらこうじ）
パイポ　パイポ　パイポのシューリンガン
シューリンガンのグーリンダイ
グーリンダイのポンポコピーのポンポコナーの
長久命の長助

クリックして開く　他をクリックして閉じる

かごめ　かごめ
籠の中の鳥は
いついつ出やる
夜明けの晩に
鶴と亀がすべった
後ろの正面だあれ？

◆html
<form>

---

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

---

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

---

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

---

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

---

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

---

</form>

◆最初は全て閉じている

全て閉じるクリックして開く　他をクリックして閉じる

いろはにほへと
ちりぬるをわか
よたれそつねな
らむうゐのおく
やまけふこえて
あさきゆめみし
ゑひもせす

クリックして開く　他をクリックして閉じる

祇園精舍の鐘の声　諸行無常の響きあり
娑羅双樹の花の色　盛者必衰の理をあらわす
奢れる人も久しからず　ただ春の夜の夢の如し
猛き者もついには滅びぬ　ひとえに風の前の塵に同じ

クリックして開く　他をクリックして閉じる

日出處天子致書日沒處天子無恙云云

日出ずる処の天子
書を日没する処の天子に致す
恙無きや

クリックして開く　他をクリックして閉じる

寿限無　寿限無
五劫の擦り切れ
海砂利水魚の
水行末　雲来末　風来末
食う寝るところに住むところ
薮ら柑子の薮柑子（やぶらこうじのぶらこうじ）
パイポ　パイポ　パイポのシューリンガン
シューリンガンのグーリンダイ
グーリンダイのポンポコピーのポンポコナーの
長久命の長助

クリックして開く　他をクリックして閉じる

かごめ　かごめ
籠の中の鳥は
いついつ出やる
夜明けの晩に
鶴と亀がすべった
後ろの正面だあれ？

◆html
<form>

---

<label>
<input type="radio" name="accordion" class="kaihei">見出し0
</label>

---

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

---

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

---

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

---

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

---

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

---

</form>

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