HTML CSS 基礎 Part 03 -- CSS のみでアコーディオンを作る

why

figma のようなアコーディオンの質問回答のセットを作りたかった。
JS を使えば簡単そうだった。
しかし、なぜか JS が読み込めなかった。
調査すると、CSS のみでも実装できるようだった。
なので、CSS のみで実装して、要点を書き残しておく。

結論

* div
  * input checkbox #accordion__input
  * label ( question )
  * content ( answer ) #accordion__content

このセットで作れば、CSS のみで開閉機能を実装できた。

.accordion__content{
    display: none;
    /* デフォルトで回答を隠す */
}
.accordion__input:checked ~ .accordion__content{
    display: flex;
    /* チェックされた時に回答を flex 表示 */
}

このように　CSS の　if 文もどきを使う。
すると、このような動作になる。

1. 質問文はデフォルトで非表示になっている
2. 質問文(ラベル)がクリックされる
3. 内部のインプットチェックボックスにチェックが入る
4. 同じ div の中にある質問文が表示状態になる。これにより、中身が開いたように見える。
5. 質問文(ラベル)が再度クリックされる
6. インプットのチェックが外れると、質問文が非表示に戻る。これにより、中身が閉じられたように見える。