クリックで表示・表示を切り替える方法!CSSだけで実装する

HTML・CSS

クリックすると中身が表示されるボックスをHTMLとCSSだけで実装する方法。別名アコーディオンボックスと言ったりもします。この方法の最大のメリットは、ページの表示速度が重くならない点。

コードの概要

Web上に表示しないチェックボックスを作り、labelのクリックでチェックを付けたり外したりする。CSSの疑似クラス”:checked”でコンテンツの表示・非表示のスタイルを変更する。

スポンサーリンク

まずはデモ

春はあけぼの。やうやう白くなりゆく山ぎは 少し明りて紫だちたる雲の細くたなびきたる。

夏は、夜。月の頃はさらなり。闇もなほ。螢の多く飛び違ひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。

スポンサーリンク

実装する

実際のソースコードはそれぞれ以下のようになります。

HTML

<div class="accordion-box">
  <input type="checkbox" id="tab1" />
  <label for="tab1">クリック①</label>
  <div>
     <p>春はあけぼの。やうやう白くなりゆく山ぎは 少し明りて紫だちたる雲の細くたなびきたる。</p>
  </div><!--//ラベル1ここまで-->
  <input type="checkbox" id="tab2" />
  <label for="tab2">クリック②</label>
  <div>
     <p>夏は、夜。月の頃はさらなり。闇もなほ。螢の多く飛び違ひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</p>
  </div><!--//ラベル2ここまで-->
</div><!--//accordion-box-->

CSS

/*ボックス全体*/
.accordion-box {
    margin: 10px 0;
    padding: 0;
}
/*ラベル*/
.accordion-box label {
    display: block;
    font-weight: bold;
    cursor :pointer;
    margin-top: 10px;
    padding:5px;
    background-color:#F6D580;
}
/*チェックボックスを非表示にする*/
.accordion-box input {
    display: none; 
}
/*中身を非表示にしておく*/
.accordion-box div {
    height: 0;
    overflow-y: hidden;
    transition: 0.5s;/*表示するスピード*/
    opacity: 0;
}
/*クリックで中身を表示*/
.accordion-box input:checked + label + div {
    height: auto;
    opacity: 1;
    background-color:#e0fdff;
}
/*アイコン*/
.accordion-box label::before {
    content: "+";
    padding-right: 8px;
}
/*クリックでアイコン入れ替え*/
.accordion-box input:checked + label::before {
    content: "-";
}
スポンサーリンク

簡単な解説

ここからは、コードの解説です。不要な方は読み飛ばしてください。

HTMLの解説

HTMLコードのポイントは↓↓の1点のみ!

<input type="checkbox" id="tab1"/>
<label for="tab1">クリックで開く1</label>

ラベルの前にinputでチェックボックスを設置します。チェックボックスにid、ラベルにfor要素を追加しすることで、ラベルをクリックするとチェックボックスにチェックが入るようになります。

注意点
  • チェックボックスのidとラベルのforは対になること。
  • 非表示コンテンツを複数設置する場合は、被らないようにする事

CSSの解説

1.ラベルでマウスカーソルの形を指定する

.accordion-box label {
display: block;
font-weight: bold;
cursor :pointer; ←これがマウスカーソルの指定
margin-top: 10px;
padding:5px;
background-color:#F6D580;
}

2.チェックボックスをWeb上から見えないようにする

.accordion-box input {
display: none; ←非表示の指定
}

3.中身を非表示にしておく

.accordion-box div {
height: 0;
overflow-y: hidden;
opacity: 0;
transition: 0.5s;/表示するスピード/
}

4.クリックで表示する|一番のメイン

.accordion-box input:checked + label + div {
height: auto;
opacity: 1;
background-color:#FCF1D3;
}

5.before要素でアイコンを切り替える

●中身が非表示の時
.accordion-box label::before {
content: “+”;
padding-right: 8px;
}


●中身を表示した時
.accordion-box input:checked + label::before {
content: “-”;
}