CSSで表示、非表示を行う

2018年10月17日

表示の切り替え処理を行おうとするとJSで切り替える方法がありますが
チェックボックスとCSSだけで対応することができます。

サンプルコード

HTML

<label for="test">ここクリック</label>
<input type="checkbox" id="test">

<div>表示が切り替わる</div>

CSS

input[type="checkbox"] {
    display: none;
}
input + div {
    display: none;
}
input:checked + div {
    display: block;
}

流れ

for=とid=を指定してラベルをクリックしたらチェックボックスが反応するようにします。

<label for="test">
<input type="checkbox" id="test">

チェックボックスは非表示にしておきます。

input[type="checkbox"] {
    display: none;
}

input + でinput直下を指定し、display:noneでチェックが入ってない状態を非表示にしておきます。

input + div {
    display: none;
}

:checked でcheckboxがチェックされたときに適応されるCSSを指定できます。
チェックされた状態をdisplay: blockで表示状態にします。

input:checked + div {
    display: block;
}

これでラベル部分をボタンのように扱って表示、非表示ができるようになります。