【jQuery】アコーディオンを実装する方法
Webサイトの表現のひとつにアコーディオンというものがあります。
アコーディオンとは見出しや概要だけ表示し、開閉するまで隠されているというものです。
よくある質問などでよく見られる表現手法です。
そこで、この記事ではjQueryを使い、CSSだけでアコーディオンを実装する方法をご紹介したいと思います。
jQueryを使いアコーディオンを実装する
jQueryを使い、アコーディオンを実装するサンプルコードです。
実装サンプル
HTMLはこちら。
<div class="accordion">
<p class="accordion-title">ここをクリックすると開きます。</p>
<p class="accordion-text">この部分のテキストは隠されていました。</p>
</div>
<div class="accordion">
<p class="accordion-title">ここをクリックすると開きます。</p>
<p class="accordion-text">この部分のテキストは隠されていました。</p>
</div>jQueryはこちら。
$(function(){
$('.accordion-text').hide();
$('.accordion').on('click',function(){
$(this).find('.accordion-text').stop().slideToggle();
});
});実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
コードの解説
jQueryを使い、アコーディオンを実装する場合、CSSの設定は必須ではありません。
アコーディオンの動作だけであれば、jQueryだけで完結します。
$('.accordion-text').hide();アコーディオンで表示する部分は、初期状態では非表示にします。
続いて、クリックイベントを設定します。
$('.accordion').on('click', function(){
$(this).find('.accordion-text').stop().slideToggle();
});<div class="accordion">をクリックした時、その中にある<div class="accordion-text">を指定し、表示非表示を切り替えます。
.stop()は、進行中のアニメーションを止める役割があります。
この指定がないと、クリックした回数だけ、表示非表示が繰り返されてしまいます。
.slideToggle()は、表示状態なら非表示に、非表示状態なら表示にします。
このメソッドは、要素をスライドしながら表示する.slideDown()、要素をスライドしながら非表示にする.slideUp()を組み合わせたものです。
.slideToggle()を使うことで、現在の表示状態を確認することなく、表示・非表示の切り替えを簡単に行うことが出来ます。
まとめ
いかがでしたか？
jQueryを使うことで簡単にアコーディオンを実装することが出来ますね。
ページが長くなってしまう場合は、複数ページに分けることも視野に、どうしても分けることが難しい内容はアコーディオンで必要な人だけが確認出来るようにページを整理しておくと親切ですね。
