クリックで表示・非表示の切り替えができるボックスをcssのみで実装する

プチ収入

目次やアコーディオンメニューなどでよく見る、クリックで表示・非表示の切り替えができるボックスをcssのみで実装する方法の紹介です。ネタバレを隠したりするのにも使えます。

FontAwesomeを使って、表示しているときと非表示のときのアイコンが変わるようにしています。

デモ

非表示にするコンテンツ

非表示にするコンテンツ

クリックで表示切替ボックスの実装方法

下記のコードがhtmlです。

<div class="switchbox">
    <input type="checkbox" id="label1" />
    <label for="label1">クリックで表示</label>
    <div>
        <p>非表示にするコンテンツ</p>
    </div><!--//ラベル1ここまで-->
    <input type="checkbox" id="label2" />
    <label for="label2">クリックで表示</label>
    <div>
        <p>非表示にするコンテンツ</p>
    </div><!--//ラベル2ここまで-->
</div><!--//switchbox-->

要素を増やすときは、チェックボックスのID(id=”label1″の部分)とラベルの関連付け(for=”label1″の部分)を変更して使ってください。

label for=はラベルと他の部品を紐づけるために使用します。こうすることで、ラベルをクリックした場合でもチェックボックスにチェックが入るようになります。

下記のコードがcssです。

/*ボックス全体*/
.switchbox {
    margin: 10px 0;
    padding: 0;
}
/*ラベル*/
.switchbox label {
    display: block;
    font-weight: bold;
    cursor :pointer;
}
/*チェックボックスを非表示にする*/
.switchbox input {
    display: none; 
}
/*中身を非表示にしておく*/
.switchbox div {
    height: 0;
    overflow-y: hidden;
    transition: 0.8s;/*ゆっくり表示させる*/
    opacity: 0;
}
/*クリックで中身を表示*/
.switchbox input:checked + label + div {
    height: auto;
    opacity: 1;
}
/*アイコン*/
.switchbox label::before {
    content: '\f067';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    padding-right: 8px;
}
/*クリックでアイコン入れ替え*/
.switchbox input:checked + label::before {
    content: '\f068';
}

チェック状態を判断して表示・非表示を切り替えたり、アイコンを入れ替えるために、セレクタ「checked」と「+」を使っています。

セレクタ「checked」とは

css3で追加されたクラスです。チェックボックスやラジオボタンにチェックが入っているかどうかを判断したいときに使います。

セレクタ「+」とは

+を使うと、その要素の直後に隣接している要素のスタイルを指定できるようになります。

チェックボックス→Label→divという順で要素を並べることで、チェックボックスの状態によってLabelとdivのスタイルを指定できます。

うまく動作しないときは

WordPressを使っている場合、pタグが自動挿入される仕様が影響しているかもしれません。

ページのソースを確認してlabelやdivの前にpタグが入ってしまっている場合、「WordPressで勝手に入るpタグを消す方法-隣接セレクタが効かなときにも」を参考にしてみてください。

コメント TwitterやFacebookのアカウントにログインしてコメントできます。