【HTML】HTMLとCSSのみでFAQを作る

WordPress

HTMLとCSSだけ使ってFAQのような開閉するコンテンツを作る方法

大まかな仕組み

CSSの擬似要素checkedを使って開いている状態と閉じている状態を表現する。

hoverならカーソルが上に乗っているかどうかでCSSを切り替えて表示するがcheckedはその要素がチェックされた状態かどうかでCSSを切り替える

具体的にはチェックボックスを使用してチェックボックスが選択されていれば開いている状態、選択されてなければ閉じている状態になるようにCSSを記述する

実際に作ってみる


アコーディオンのサンプル

アコーディオンの中身
アコーディオンの下のコンテンツ

※ページ中にコードを打ち込んだので現在のサンプルでもアニメーションします。

    <style>
        /*閉じた状態*/
        .acd_text{
            height:0;
            overflow:hidden;
        }
        /*開いた状態*/
        .acd_check:checked + .acd_text{
            height:auto;
            opacity:1;
        }
    </style>

    <label for="check1">クリックで開く</label>
    <input type="checkbox" id="check1" class="acd_check">
    <div class="acd_text">アコーディオンの中身</div>
    <div>アコーディオンの下のコンテンツ</div>

最低限の状態。ラベルかチェックボックスをクリックすると開閉の状態が切り替わるようになっている。

まず、ラベルのfor属性にチェックボックスのidを指定(サンプルではcheck1)することでラベルをクリックすることでもチェックを入れられるようになる。

次に、チェックボックスのすぐ下にアコーディオンの中身を記述する。中身を示すタグはなんでも良いが、今回は隣接セレクタ(+)を使用するので必ずチェックボックスのすぐ下に記述する。

次にCSSを設定。アコーディオン本文は最初は閉じているので高さは0、はみ出たテキストの扱いを指定するoverflowもhidden(隠す)にしておく

次にチェックが入れられて開いた状態のCSSを設定する。チェックが入れられた状態は擬似要素checked。さらに隣接セレクタである+を使って

チェックボックスのクラス:checked + 切り替えたいクラス

と記述すると、「チェックが入れられたチェックボックスの隣にあるクラス」を指定することができる。

サンプルの場合「.acd_check:checked + .acd_text」がチェックされた状態の隣のクラスを示しているので開いた状態である高さはauto、不透明度も1(100%)に指定。

上記の設定で、チェックボックスのオンオフで高さが切り替わるようになる

CSSを整えていく

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

アコーディオンの中身
アコーディオンの中身
アコーディオンの中身
アコーディオンの中身
アコーディオンの中身
アコーディオンの下のコンテンツ
    <style>
        /*閉じた状態*/
        .acd_text{
            height:0;
            opacity:0;
            overflow:hidden;
            /*追加したCSS*/
            transition: 0.5s;
            background-color:#CCC;
            padding:0px 5px;
        }
        /*開いた状態*/
        .acd_check:checked + .acd_text{
            height:auto;
            opacity:1;
            /*追加したCSS*/
            padding:10px 5px;
        }
        /*チェックボックスを隠す*/
        .acd_check{
            display:none;
        }
        /*ラベルをボタン風に装飾*/
        .label_button{
            padding:10px;
            background-color:#232399;
            border-radius:10px;
            color:#FFF;
            margin-bottom:20px;
            display:inline-block;
            width:200px;
            height:45px;
            text-align:center;
        }
    </style>

    <h4>アコーディオンの動作サンプル</h4>
    <label for="check1">クリックで開く</label>
    <input type="checkbox" id="check1" class="acd_check">
    <div class="acd_text">
        アコーディオンの中身<br>
        アコーディオンの中身<br>
        アコーディオンの中身<br>
        アコーディオンの中身<br>
        アコーディオンの中身<br>
    </div>
    <div>アコーディオンの下のコンテンツ</div>

追加したのは下記の要素

  • チェックボックスのdisplayをnoneにして見えなくした
  • paddingを指定することで要素の大きさの変更がアニメーション対象になった。
  • transition=アニメーションが完了するまでの時間を0.5秒に指定
  • 変化がわかりやすいようにbackground-colorを指定
  • ラベルにクラスを追加してCSSでボタン風に見せる

外見とtransitionを指定することでかなりそれっぽく見えます。アコーディオン機能そのものはjqueryやプラグインなどでも実装できますが、簡単な物でよければHTMLとCSSだけで実装できます。

タイトルとURLをコピーしました