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

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

まずはデモ

実装する

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

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要素を追加しすることで、ラベルをクリックするとチェックボックスにチェックが入るようになります。

CSSの解説

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

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

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

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

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