CSS3だけでつくるアコーディオン

今更ながらかもしれないが、CSS3だけ使ってアコーディオンを実装してみたのでメモ。

See the Pen CSS3 Accordion by Poor Stack (@poorstack) on CodePen.

もっと簡素化したものがこちら

See the Pen CSS3 Accordion 101 by Poor Stack (@poorstack) on CodePen.

仕組み

肝の部分は下記の箇所

.accordion-Body {
  display: none;
  padding: 10px;
}

.accordion-Checkbox:nth-of-type(1):checked ~ .accordion-Body:nth-of-type(1),
.accordion-Checkbox:nth-of-type(2):checked ~ .accordion-Body:nth-of-type(2)
{
  display: block;
}

要するに :checkd 擬似クラスセレクター と ~ 結合子を使って、選択されているチェックボックスに対応するパネルを表示させている。

下記のようにタイトル部分に label 要素を入れ込んでおき for 属性で対応するチェックボックスの id を指定してあげればタイトルをクリックするとボディが表示されるアコーディオンになる。

<div class="accordion">
  <input type="checkbox" class="accordion-Checkbox" id="checkbox1">
  <input type="checkbox" class="accordion-Checkbox" id="checkbox2">


  <h2 class="accordion-Title">
    <label for='checkbox1'>Title1</label>
  </h2>
  <div class="accordion-Body">
    <!-- content -->
  </div>

  <h2 class="accordion-Title">
    <label for='checkbox2'>Title2</label>
  </h2>
  <div class="accordion-Body">
    <!-- content -->
  </div>

</div>

実際に使用するときは下記のようにチェックボックスを隠すと良いだろう。

.accordion-Checkbox {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  -ms-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}