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

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

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

Contents

デモ
クリックで表示切替ボックスの実装方法
- セレクタ「checked」とは
- セレクタ「+」とは
うまく動作しないときは

デモ

クリックで表示

非表示にするコンテンツ

クリックで表示

非表示にするコンテンツ

目次に戻る

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

下記のコードがhtmlです。

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です。

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」と「+」を使っています。