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を表示/非表示させている。