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

2018-01-11 @niketcha

目次やアコーディオンメニューなどでよく見る、クリックしたら表示されるコンテンツをcssのみで実装する方法の紹介です。

ネタバレを隠したりするのにも使えます。

Sponsored Link

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

デモ

非表示にするコンテンツ

非表示にするコンテンツ

シンプルなデザインにしてますが、cssの設定で背景色や影を付けたりボタン風のデザインに変えることもできます。

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とラベルの関連付け(for=の部分)を変更して使ってください。

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: 'FontAwesome';
    padding-right: 8px;
}
/*クリックでアイコン入れ替え*/
.switchbox input:checked + label::before {
    content: '\f068';
}

チェック状態を判断してスタイルを設定するために、セレクタ「checked」と「+」を使っています。

セレクタ「checked」とは

css3で追加されたクラスです。inputで作成されたチェックボックスやラジオボタンにチェックが入った時のスタイルを指定したい場合に使います。

セレクタ「+」とは

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

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

うまく動作しないときは

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

ページのソースを確認してlabelやdivの前にpタグが入ってしまっている場合、こちらの記事を参考にしてみてください。

-ウェブサイト構築, css

コメントを残す

お名前もメールも入力は任意です。お気軽に指摘や質問などしていただけると嬉しいです。

Gravatarに登録すると、お好きな画像をアバターに設定できます。

Copyright© ニケッチャニッキ , 2017-2018 All Rights Reserved.