アコーディオンを CSS でシンプルに表示する

ウェブページでアコーディオン表示を使う場合は気をつけましょうというページを書いておいてどうなのかということだが，一応，javascript (jQuery) を使わない「アコーディオン表示」の書き方を説明する．

アコーディオン表示動作サンプル

下の「クリックで隠れている部分を表示」を押すと隠れている部分が見えるようになる．

このようなものをアコーディオン表示という．
これは javascript で実現できるが，それほど大層なものでもないので CSS だけで十分に実装出来る．

HTMLソース

HTML のサンプルコード

<div id="sample" class="parent">
<input type="checkbox" id="sample-parent"/>
<label for="sample-parent">
  <span class="click-area">クリックで隠れている部分を表示 <i class="fas angletoggle"></i></span>
</label>
<p class="child">
  アコーディオンで隠れている部分
</p>
</div>

CSSコード

CSS のサンプルコード

<style>
#sample input {
  display: none;
}
.parent {
  max-height: inherit;
  overflow-y: visible;
}
.child {
  max-height: 0;
  overflow-y: hidden;
  visibility: hidden;
}
.parent .child {
  position: relative;
  opacity: 1;
  padding: 0 10px;
  visibility: visible;
  top: 0;
  margin-left: auto;
  left: auto;
  width: auto;
}
.child {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.click-area {
  background: bisque;
  padding: 6px;
}
#sample input[type="checkbox"]:checked ~ .child {
  max-height: inherit;
  overflow-y: visible;
  visibility: visible;
  opacity: 1;
}
.angletoggle:before {
  content: "\f107";
}
#sample input[type="checkbox"]:checked ~ * .angletoggle:before {
  content: "\f106";
}
</style>