CSSのみでアコーディオンメニューを実装する方法

背景

Q&A 表のように「質問部分をクリックすると答えを表示する」ような動作を JavaScript は使用せず実装する。

デモ

実装方法

必要な実装は以下の通り。

<div class="collapse">
  <input
    class="collapse_control"
    id="collapse_head1"
    type="checkbox"
    hidden=""
  />
  <label class="collapse_head" for="collapse_head1">Question</label>
  <div class="collapse_body">
    <div class="inner">Answer</div>
  </div>
</div>

.collapse_body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.collapse_control:checked ~ .collapse_body {
  max-height: 100vh;
}

予め.collapse_bodyは非表示にしておき、包括したチェックボックスの on/off をトリガーにして兄弟の.collapse_bodyを表示/非表示させている。