【jQuery不要】CSSだけでアコーディオンを実装する方法
Webサイトの表現のひとつにアコーディオンというものがあります。
アコーディオンとは見出しや概要だけ表示し、開閉するまで隠されているというものです。
よくある質問などでよく見られる表現手法です。
そして、このアコーディオンはjQueryを使い実装する方法がよく知られていますが、実はCSSだけでも実装することが出来るんです。
そこで、この記事ではjQueryを使わず、CSSだけでアコーディオンを実装する方法をご紹介したいと思います。
この記事の目次を表示
CSSだけでアコーディオンを実装する
jQueryを使わず、CSSだけでアコーディオンを実装するサンプルコードです。
実装サンプル
HTMLはこちら。
<div class="accordion">
<p class="accordion-title"><label for="accordion1">ここをクリックすると開きます。</label></p>
<input type="checkbox" name="accordion1" id="accordion1">
<p class="accordion-text">この部分のテキストは隠されていました。</p>
</div>
<div class="accordion">
<p class="accordion-title"><label for="accordion2">ここをクリックすると開きます。</label></p>
<input type="checkbox" name="accordion2" id="accordion2">
<p class="accordion-text">この部分のテキストは隠されていました。</p>
</div>
CSSはこちら。
.accordion-text{
display: none;
}
.accordion input[type="checkbox"]{
display: none;
}
.accordion input[type="checkbox"]:checked + .accordion-text{
display: block;
}
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
コードの解説
アコーディオンで表示する部分(.accordion-text
)は、通常時は非表示(display: none
)にしておきます。
.accordion-text{
display: none;
}
この表示、非表示はチェックボックスを使って切り替えます。
チェックボックスがチェック状態になった時だけ、CSSの値を切り替えて内容を表示します。
.accordion input[type="checkbox"]:checked + .accordion-text{
display: block;
}
+
のセレクタを使うことで、チェックボックスにチェックが入っている時に次のタグ(兄弟要素)を選択し、そのタグを表示(display: block;
)状態にすることが出来ます。
アコーディオン自体にチェックボックスは不要なので、非表示にします。
.accordion input[type="checkbox"]{
display: none;
}
【アニメーション付き】CSSだけでアコーディオンを実装する
先ほどご紹介したものはアニメーション無しのアコーディオンの実装方法でした。
続いてご紹介するのはCSSだけで実装するアニメーションありのアコーディオンです。
実装サンプル
HTMLはこちら。
<div class="accordion">
<p class="accordion-title"><label for="accordion1">ここをクリックすると開きます。</label></p>
<input type="checkbox" name="accordion1" id="accordion1">
<p class="accordion-text"><span>この部分のテキストは隠されていました。</span></p>
</div>
<div class="accordion">
<p class="accordion-title"><label for="accordion2">ここをクリックすると開きます。</label></p>
<input type="checkbox" name="accordion2" id="accordion2">
<p class="accordion-text"><span>この部分のテキストは隠されていました。</span></p>
</div>
CSSはこちら。
.accordion-text{
display: grid;
transition: grid-template-rows 0.5s;
grid-template-rows: 0fr;
}
.accordion input[type="checkbox"]{
display: none;
}
.accordion-text span{
overflow: hidden;
}
.accordion input[type="checkbox"]:checked + .accordion-text{
grid-template-rows: 1fr;
}
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
コードの解説
アニメーションありのアコーディオンの場合、
アコーディオンで表示する部分(.accordion-text
)は、通常時は非表示です。display: grid;
を使ってグリッドレイアウトを適用し、grid-template-rows: 0fr;
を設定することで高さが0になり、内容が非表示になります。
さらに、transition: grid-template-rows 0.5s;
を指定しておくことで、高さを元に戻し、表示する際、0.5秒かけて表示するようになります。
.accordion-text{
display: grid;
transition: grid-template-rows 0.5s;
grid-template-rows: 0fr;
}
この高さの切り替えにはチェックボックスを使います。
チェックボックスがチェック状態になった時だけ、CSSの値を切り替えて内容を表示します。
.accordion input[type="checkbox"]:checked + .accordion-text{
grid-template-rows: 1fr;
}
+
のセレクタを使うことで、チェックボックスにチェックが入っている時に次のタグ(兄弟要素)を選択し、そのタグにgrid-template-rows: 1fr;
が設定されるようにします。
アコーディオン自体にチェックボックスは不要なので、非表示にします。
.accordion input[type="checkbox"]{
display: none;
}
まとめ
いかがでしたか?
jQueryを使わなくてもCSSだけでアコーディオンは実装可能です。
jQueryを使うとどうしても処理が重くなりがちです。今はCSSだけでも色んなアニメーションを実装することが出来るようになっています。
今まではjQueryを使ってアコーディオンを実装していた人も、一度CSSだけで実装してみてはいかがでしょうか?