HTMLとCSSだけ！要素の表示・非表示を切り替える方法

表示⇔非表示を切り替える仕組み

ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。

inputタグに連動させて切り替え

CSSのセレクタ「~」を活用

CSSのセレクタ~を使うと「ある要素の後に続く要素」に対して、スタイルを指定することができます（同じ階層にある要素に限ります）。

◯ ~ △ {スタイル指定} ◯の後に続く△にのみスタイル指定が適用される

つまりinput:checked ~ divと書けば「チェックの入ったinputタグの後ろにあるdiv」に対してスタイルが指定できるようになります。

これを活かして、divタグをはじめは非表示にしておき、inputにチェックが入ると直後のdivタグが表示されるようになる…というようにスタイル指定すれば良いのです。

セレクタについては下の記事で解説しています。

CSSのセレクタとは？覚えておきたい25種類と書き方

表示・非表示を切り替えるボタンサンプル

ではここから具体的なコードサンプルを紹介していきます。まずは以下のような表示・非表示の切替ボタンを作ります。

もちろん画像の代わりに文章を入れることも可能です。

<div class="hidden_box">
    <label for="label1">クリックして表示</label>
    <input type="checkbox" id="label1"/>
    <div class="hidden_show">
      <!--非表示ここから-->     
      	<p><img src="face.png"></p>
      <!--ここまで-->
    </div>
</div>

/*全体*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

HTMLの解説

HTMLの<!--非表示ここから-->〜<!--ここまで-->の中に書いたものがクリックで表示・非表示の切り替え対象になります。この中に画像なり、文章なり隠しておきたいものを入れましょう。
一方、切替ボタンとなるのはlabelタグの部分です。「クリックして表示」というボタンテキストは自由に変えてくださいませ。

1ページに複数のボタンを使うときにはidを変える

1ページに隠しボタンを2つ以上設置するときには、以下のようにlabel for="◯◯"とid for="◯◯"を別の名前に変えましょう。

名前は何でも良いのですが、分かりやすく2つめのボタンはlabel for="label2"とid="label2"に、
3つめのボタンはlabel for="label3"とid="label3"に、というように、ボタンの設置数分に合わせてlabel◯の数字を変えれば良いかと思います。

ちょっと面倒ですが、これを忘れると2つ目のボタンをクリックすると、1つめに隠していたものが表示される…なんてことになってしまいます。

CSSの解説

ボタンの装飾

ボタンの装飾はlabelに対して行います。お好みでデザインを変えましょう。下の記事でボタンのデザインをたくさん紹介しています。

CSSで作る！押したくなるボタンデザイン100（Web用）

気に入ったデザインがあれば、セレクタだけ.hidden_box label{スタイル指定}というように変えて使うことができます。

表示・非表示の切り替え

まず、divタグ（.hidden_show）を非表示にしておきます。display:noneを使えば1発なのですが（参考：CSSのdisplay）、表示されるときにヌルっと感を出すためにゴニョゴニョとやっています。

そして、inputにチェックが入った場合、その直後にあるdivタグ（.hidden_show）に対してスタイル指定をします。具体的には隠すための指定を取り消しています。

Webアイコンを使う例（クリックで切り替え）

ちょっとした応用編です。Webアイコンフォントを表示させ、クリックでアイコンが切り替わるようにしてみましょう。アイコンはFontAwesomeを使って表示させます。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

<div class="hidden_box">
    <input type="checkbox" id="label1" />
    <label for="label1">クリック</label>
    <div class="hidden_show">
      <!--非表示ここから-->     
      <p>こんにちは</p>
      <!--ここまで-->
    </div>
</div>

/*全体*/
.hidden_box {
    margin: 2em 0;
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    background: #efefef;
    border-radius: 5px;
    cursor :pointer;
    transition: .5s;
}

/*アイコンを表示*/
.hidden_box label:before {
    display: inline-block;
    content: '\f078';
    font-family: 'FontAwesome';
    padding-right: 5px;
    transition: 0.2s;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: silver;
}

/*アイコンを切り替え*/
.hidden_box input:checked ~ label:before {
     content: '\f00d';
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #668ad8;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

以下CSSの解説

アイコンは疑似要素で表示

アイコンはlabelに対して、疑似要素:beforeで表示させています。疑似要素って何？という方はこちらをどうぞ。

CSSの疑似要素とは？beforeとafterの使い方まとめ

inputにチェックが入ると、label:beforeを変更

inputにチェックが入ると、その直後のlabel:beforeのアイコンを変えるようにしています（~のセレクタを使えば、ある要素の直後の要素に対して、スタイル指定できるんでしたね）。そのために、HTMLではinput⇒label⇒divという順に並べています。

ついでにtransform: rotate(360deg)で切替時にアイコンを360度回転させています。

inputにチェックが入ると、divを表示

こちらは先程と同じ仕組みですね。チェックが入っているinputの後にあるdiv（.hidden_show）に対してCSSを指定しています。