2020/02/28 (更新日: 2024/01/04)

HTMLのチェックボックスを使ってアコーディオン型UIを作る方法

HTML/CSS

Webページ内にクリックで開閉するアコーディオン型のUIを実装することも多いと思います。
今回は、HTMLの<input type="checkbox">タグを利用してアコーディオンを設置する方法について紹介していきたいと思います。

なお、HTMLのdetailsタグとsummaryタグを利用してアコーディオンを設置する方法については下記のページで紹介していますので、よかったら見てみてください。

HTMLのチェックボックスを使ってアコーディオンができる仕組み

チェックボックスには、チェックが入っているときだけ:checkedという疑似クラス名がつきます。
この:checkedの有無でCSSを切り替えることで表示・非表示を切り替えてアコーディオンを作成することができます。

次の項目では、<input type="checkbox">でアコーディオンが開閉する仕組みについて紹介していきます。

HTMLのチェックボックスを使ってアコーディオンを作る方法

事例として、質問文をクリックすると回答文が表示されるというアコーディオンをステップバイステップで作成していきます。

用意するHTML要素としては、チェックボックス、質問文、回答文になります。
それぞれの要素を普通に設置すると下のようになります。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

ここでは、要素を設置しただけなのでチェックボックスにチェックを入れたり外したりしても何も変化は起こりません。

次に、チェックボックスにチェックが入っているときとそうでないときとで表示が切り替わるようにCSSを記述してみましょう。
今回の例で、チェックの有無で表示を切り替えたい要素はclass="answer"とした回答文の要素です。
チェックボックスclass="check"にチェックが入っていて、疑似要素:checkedがついているときのclass="answer"の要素は、.check:checked + .question + .answerと表されます。
これを使って上の例をチェックの有無で回答文の色が変わるように変更すると、下のようになります。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

ここで、 + を使ってCSSを指定していますが、これは隣接兄弟結合子と呼ばれるもので、隣り合った要素のクラス名などを繋ぎ合わせて条件のようにして要素を指定することができるものです。
隣接兄弟結合子について詳しくは下記のページを見てみてください。

隣接兄弟結合子 – CSS: カスケーディングスタイルシート | MDN

上の作成例では、チェックボックスの部分しかクリックに反応しません。そこで、チェックボックスだけではなく質問文のテキストをクリックしたときも回答文の色が変化するようにしてみましょう。
実際に作成したいアコーディオンでは、チェックボックスを非表示にして質問文のクリックで回答文が表示されるようにしたいからです。

そのためには、ここまでpタグを使っていた質問文をlabelタグで設置するようにして、さらにチェックボックスとこの質問文のlabelタグを関連付けする必要があります。
さらにチェックボックスとlabelタグを関連付けするために<input type="checkbox">にidを指定して、labelタグ内のfor=""で関連付けしたいチェックボックスのidを指定することが必要です。
ここまでの作成例は下のようになります。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

ここまでで、質問文の部分をクリックしたときに回答文の表示を切り替えることができるようになりました。
次に、チェックボックス自体は今回の例では表示させたくないのでCSSで非表示にします。

あわせて質問文のテキストがクリックできることがわかりやすいようにするために、マウスカーソルが質問文のところではポインタに変化するようにしておきます。

チェックボックスをCSSのdisplay: none;で非表示にして、マウスカーソルが変化するようにlabel要素に対してcursor: pointer;と指定することで、下のような見た目になります。
これで質問文をクリックするたびに回答文のテキストの色が切り替わるようになりました。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

次に、クリックすることでアコーディオンのように表示・非表示の切り替えができるようにしていきましょう。
はじめに回答文のテキストである.answerをopacity: 0;で透明にして見えないようにしておき、質問文がクリックされたとき（チェックボックスにチェックが入ったとき）にopacity: 1;で不透明にして見えるようにします。
また、このときのopacity（不透明度）の切り替わりをゆっくりと変化させるためにtransition: 1s;も併せて指定しています。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

次に、質問と回答の組み合わせが複数ある場合について考えてみましょう。
ここまでで作った質問と回答を複数設置すると、下のようになります。
このときに注意すべきなのはチェックボックスとlabelとの紐付けです。チェックボックスとlabelとは一対一で結び付いているはずですし、idを使って紐付けを行なっています。なので、それぞれのチェックボックスごとに異なるidを振って紐付けを行うようにしましょう。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

上のように記述して複数の質問と回答を設置することでそれぞれの質問をクリックするごとにそれぞれの回答が表示されたり非表示になったりするようにはなりました。
ただ、このままだと回答文が表示されたり消えたりするだけでアコーディオンのような動きにはなっていません。

アコーディオンのような動きをさせるために、いくつかCSSの記述を追加していきましょう。

まずは、チェックが入っていないときに回答文のテキストが入る要素の高さをなくし、チェックが入ったときに回答文のテキストが入る要素の高さを設定します。
具体的には、チェックが入っていないときの回答文の要素である.answerにheight: 0;とmargin: 0;を指定しておきます。そしてチェックが入ったときには回答文を不透明にするとともに、要素の高さを指定してあげます。（今回の例では、.check:checked + .question + .answerにheight: 50px;を指定しています。）

次に、質問文の位置がアコーディオンの開閉によって移動してしまうことへの対処を行います。
前の部分の処置を行うことで、チェックの有無によって質問文のテキストの位置が移動するようになりました。
このままだと、質問文の位置によって意図した質問文をクリックできなくなってしまいます。
そこで、質問文の位置を常に正しく取得できるように.questionにposition: relative;を指定します。

上記の処置を行うと、下のようになります。
ここまでで、一応アコーディオンとしての最低限の動きが実現できたと思います。
あとは、CSSやJavaScriptなどを使って見た目を整えたり、動きを変化させたりすることで実際のサイト内に実装できるようなものにすることができると思います。

See the Pen
Untitled by saku (@web-saku)
on CodePen.

次の項目では、ここまで紹介してきたものを元にした実装例を紹介していきます。

アレンジ例の紹介

ここでは、クリックで開閉するアコーディオンをチェックボックスを使って実装する時のアレンジ例を紹介します。
下の記述例では「質問と回答」を想定したアコーディオンを作ってみました。
チェックボックスのチェックの有無でアコーディオンの中身の表示/非表示を切り替え、合わせてCSSの擬似要素を使って矢印の表示も切り替えています。

See the Pen
ZEGLLrq by saku (@web-saku)
on CodePen.

HTMLとCSSの記述例はそれぞれ以下のようになります。

HTML
<input id="acc1" class="acc-check" type="checkbox">
<label class="acc-label label-1" for="acc1">質問１</label>
<div class="acc-content content-1">
    <p>質問１の回答文テキストテキストテキストテキストテキストテキスト</p>
</div>

<input id="acc2" class="acc-check" type="checkbox">
<label class="acc-label label-2" for="acc2">質問２</label>
<div class="acc-content content-2">
    <p>質問２の回答文テキストテキストテキストテキストテキストテキスト</p>
</div>

<input id="acc3" class="acc-check" type="checkbox">
<label class="acc-label label-3" for="acc3">質問３</label>
<div class="acc-content content-3">
    <p>質問３の回答文テキストテキストテキストテキストテキストテキスト</p>
</div>

CSS
.acc-check {
    display: none;
}
.acc-label {
    background: #567;
    color: #fff;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
    position: relative;
}

.label-2, .label-3 {
    top: -10px;
}

.acc-content {
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
}

.content-2, .content-3 {
    margin-top: -10px;
}

.acc-check:checked + .acc-label + .acc-content {
    height: 55px;
    opacity: 1;
    border-bottom: 2px solid #567;
}

.acc-label::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    position: absolute;
    right: 10px;
    top: calc(50% - 2px);
    border-top: solid 2px;
    border-right: solid 2px;
    transform: rotate(135deg) translateY(50%);
    color: #fff;
}

.acc-check:checked + .acc-label::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    position: absolute;
    right: 12px;
    top: calc(50% - 2px);
    border-top: solid 2px;
    border-right: solid 2px;
    transform: rotate(-45deg) translateY(-20%);
    color: #fff;
}