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 文もどきを使う。
すると、このような動作になる。
- 質問文はデフォルトで非表示になっている
- 質問文(ラベル)がクリックされる
- 内部のインプットチェックボックスにチェックが入る
- 同じ div の中にある質問文が表示状態になる。これにより、中身が開いたように見える。
- 質問文(ラベル)が再度クリックされる
- インプットのチェックが外れると、質問文が非表示に戻る。これにより、中身が閉じられたように見える。
Top comments (0)