CSSだけで開閉するアコーディオン（JavaScriptなし）

2021年に同ドメインで運営していたブログに書いていた記事の転載です

コーディングしてるとたまに使う。
checkboxをradioにしてもいい。
こういうUIをパカパカって呼んでた。

以下2026/04/09追記

実装コード (HTML / CSS) *CodePenとほぼ同じ

<div class="open-wrap">
  <input type="checkbox" name="open-btn" id="open-deli-01" class="open-input">
  <div class="open-contents">
    <label for="open-deli-01" class="open-label">
      A btn
    </label>
    <div class="open-contents__inner">
      A CONTENTS
    </div>
  </div>
  <input type="checkbox" name="open-btn" id="open-deli-02" class="open-input">
  <div class="open-contents">
    <label for="open-deli-02" class="open-label">
      B btn
    </label>
    <div class="open-contents__inner">
      B CONTENTS
    </div>
  </div>
</div>

.open-wrap {
  display: block;
  margin: 0 0 8px;
}

@media only screen and (min-width: 767px) {
  .open-wrap {
    margin: 0 0 32px;
  }
}

.open-input {
  display: none;
}

.open-label {
  position: relative;
  display: block;
  padding: 8px 8px 8px 28px;
  line-height: 24px;
  font-size: 16px;
  background: #eee;
  cursor: pointer;
}

.open-label:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  display: block;
  width: 16px;
  height: 16px;
  border: solid 1px #ced4da;
  border-radius: 5px;
  background: #f5f5f5;
}

.open-label:after {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  display: none;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #e86b40;
  border-right: 3px solid #e86b40;
}

@media only screen and (min-width: 767px) {
  .open-label {
    padding: 8px 8px 8px 32px;
  }
  .open-label:before {
    left: 8px;
  }
  .open-label:after {
    left: 13px;
  }
}

.open-contents {
  position: relative;
}

.open-contents__inner {
  display: none;
}

.open-input:checked + .open-contents > .open-contents__inner {
  display: block;
}

@media only screen and (min-width: 767px) {
  .open-input:checked + .open-contents > .open-contents__inner {
    padding: 4px 0 0 0;
  }
}

.open-input:checked + .open-contents > .open-label:after {
  display: block;
}

なぜcssだけで表現したいか

いま(2026年)とちがい、2021年ともちがい、2015年とかくらいだろうか、ユーザーの端末のパワーが足りないため、軽量なサイトがなにより正義の時代があった。
jQueryやjavascriptですらも、できれば使いたくない。

そのため、cssだけでこういうtoggleみたいなことができると重宝した。
CodePenのアカウントを持っていたことすらも、この記事を発見するまで忘れていた。

実用的なユースケース

FAQ、アコーディオンメニュー、モーダルの代替、なんでもいける。
現在（2026年）も動作を確認済み。
animation と組み合わせることで、より凝ったトランジション効果も実現できる。

ソースコード解説

checkbox の :checked 擬似クラスと隣接セレクタ（+）を使って、display:none;したりdisplay:block;したりしているだけ。