CSSだけでオープン・クローズできるアコーディオンを表示する

jQueryを利用せずとも、CSSだけでクリックで開け閉めできるアコーディオン表示を実現できるようです。

CSS

.listAccordion label {
  background: #f6f6f6;
  padding: 6px 10px;
  display: block;
  cursor: pointer;
}
.listAccordion label:hover {
  background: #f0f0f0;
}
.listAccordion input[type="checkbox"].on-off {
  display: none;
}
.listAccordion .listTips {
  background: #f6f6f6;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ededed;
}
.listAccordion input[type="checkbox"].on-off + .listTips {
  height: 0;
  overflow: hidden;
}
.listAccordion input[type="checkbox"].on-off:checked + .listTips {
  height: auto;
}

HTML

<div class="listAccordion">
   <label for="Panel1">ラベル１</label>
   <input type="checkbox" id="Panel1" class="on-off" checked/>
   <div class="listTips">
   テキスト１
   </div>
   <label for="Panel12">ラベル２</label>
   <input type="checkbox" id="Panel12" class="on-off"/>
   <div class="listTips">
   テキスト２
   </div>
</div>

参考：CSSだけでメニューが開いたり閉じたりするアコーディオンを作る！javascript不要