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

harada 6,460views 更新:2015年5月13日

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">ラベル1</label>
   <input type="checkbox" id="Panel1" class="on-off" checked/>
   <div class="listTips">
   テキスト1
   </div>
   <label for="Panel12">ラベル2</label>
   <input type="checkbox" id="Panel12" class="on-off"/>
   <div class="listTips">
   テキスト2
   </div>
</div>

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

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません