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

1 min read

背景

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

このページをシェアする

関連タグ

関連記事

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考

[CSS設計] ITCSSとは

TL;DR / CSS の問題 / ITCSS / 参考

[CSS設計] ITCSSをプロダクトに利用した所感

CSS の問題点 / CSS 設計 / ITCSS とは / ITCSS のメリット / おわり / 参考

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

Googleが配信している日本語ウェブフォント一覧

はじめに(結論) / M+ 1p / Rounded M+ 1c / はんなり明朝 / こころ明朝 / さわらび明朝 / さわらびゴシック / ニクキュウ / ニコモジ / Noto Sans Japanese / まとめ

[CSS] 国内の主要サイトのfont-familyを調べてみた

日本の主要サイトとは / font-family 一覧 / 関連