クリックで表示・表示を切り替える方法!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: “-”;
}



この記事を書いた人
マイマイ

2016年12月生まれの男児を育てる三十路ママ。生後6か月で復帰し時短勤務中です。平日はほとんどワンオペ。昼休憩や寝かしつけ後など隙間時間でブログをこなしています。日々の家事は必要最低限のみです。
お出かけスポット情報や自立を促す子育て方法など実体験をもとにまとめています。

ツイッターもやってます
HTML・CSS Webサイト運営
みやぎで暮らす
タイトルとURLをコピーしました