Hey guys!!
皆さんお元気ですか？
お待たせしました、LiSMOtechの原です。
今回の記事では、JQueryを使ったアコーディオンパネル５選をご紹介します。
アコーディオンパネルといえば、WEB制作の場面ではよく活用される技術になりますね。
特にモバイルデバイスのスペースを節約したり、ユーザーが詳細情報を見る前に全体像を把握できる等、効果的に使用されているものが多く見受けられます。
JQueryを使うことで、比較的簡単にサッと実装ができるため工数の削減もでき、また初心者の方にもおすすめです！
それでは、やっていきましょう！！
※今回はjQueryを使用しているので読み込みを忘れないように！
目次
See the Pen Untitled by JuntaHara (@juntahara) on CodePen.
まずはHTMLから解説していきましょう。
accordion_titleはタイトルの入るクリック領域、accordion_innerはクリックされた際に開くコンテンツ内容の入る領域です。
ちなみに、タグは本記事ではdivを使用していますが、アコーディオンパネルはQ＆Aなどの定義と説明がセットになっているセクションに多く用いられるため、dl dd dtタグを使うなど、コンテンツの意味に沿ったタグを使用しましょう。
※クリックする領域を開く領域があれ別のタグでも問題ありません。
次にCSSの説明です。
.accordion_inner {
display: none;
padding: 20px 20px;
border-left: 2px solid #daa520;
border-right: 2px solid #daa520;
border-bottom: 2px solid #daa520;
box-sizing: border-box;
}.accordion_innerは最初は非表示にしておいきたいのでdisplay: none;に指定しておきましょう。
非表示の指定はjQueryでもできますが、今回はjQuery側をなるべく簡潔にするためCSSの方で記述しています。
$(function(){ // .js-accordion_titleをクリックすると $('.js-accordion_title').click(function(){ // クリックした次の要素を展開 $(this).next('.js-accordion_inner').slideToggle(); // 展開するときjs-accordion_titleクラスにopenクラスを追加してアイコンを回転 $(this).toggleClass("open"); }); });
jQeryがたった２行で完結していて簡単ですね！
今回、javascript(jQuery)で動かす要素は’js-**’というクラス名を付けて、CSSとの役割分担を明確にしています！
クリック領域：.js-accordion_title
展開領域：.js-accordion_title
それでは、簡単に説明していきます。
// クリックした次の要素を展開
$(this).next('.js-accordion_inner').slideToggle();この「this」は.js-accordion_titleになります。
.slideToggle().slideUp().slide Down()
Toggle系の関数は便利なので覚えておきましょう！
// 展開するときjs-accordion_titleクラスにopenクラスを追加してアイコンを回転
$(this).toggleClass("open");ここではthis.js-accordion_titleにopenクラスをつけたり外したりして＋アイコンを回転させています。
See the Pen accordion-sample2 by JuntaHara (@juntahara) on CodePen.
$(function(){
// .js-accordion_titleをクリックすると
$('.js-accordion_title').click(function(){
// クリックした次の要素を展開する処理
$(this).next('.js-accordion_inner').slideToggle();
// 展開するときjs-accordion_titleクラスにopenクラスを追加してアイコンを回転する処理
$(this).toggleClass("open");
// クリックされた.js-accordion_title以外の.js-accordion_titleに隣接する.js-accordion_innerを閉じる処理
$('.js-accordion_title').not($(this)).next('.js-accordion_inner').slideUp();
// 閉じられた他の.js-accordion_title要素に追加したopenクラスを外しアイコンを元に戻す処理
$('.js-accordion_title').not($(this)).removeClass("open");
});
});jQueryが少し長く複雑になりましたね。
上記に追加された記述を解説していきます！
// クリックされた.js-accordion_title以外の.js-accordion_titleに隣接する.js-accordion_innerを閉じる処理
$('.js-accordion_title').not($(this)).next('.js-accordion_inner').slideUp();この時の.not($(this))は「this」つまり.js-accordion_title以外の〜という意味です。
つまりクリックされた.js-accordion_title以外の.js-accordion_titleに隣接する.js-accordion_innerを閉じる時の処理を指定しています。
// 閉じられた他の.js-accordion_title要素に追加したopenクラスを外しアイコンを元に戻す処理
$('.js-accordion_title').not($(this)).removeClass("open");次に.removeClassはクラスを外す関数になります。
そのため、閉じられた他の.js-accordion_title以外の「this」つまり.js-accordion_titleのopenクラスを外す処理
ということになります。
See the Pen Untitled by JuntaHara (@juntahara) on CodePen.
こちらはHTML/CSSの記述をいじるだけですので簡単ですね。
<div class="accordion_container">
<div class="accordion_title js-accordion_title default">アコーディオン１【最初のパネルは開けておく】<div class="icon_wrap"><i class="icon"></i></div></div>
<div class="accordion_inner js-accordion_inner default">
<div class="ac_inner_wraper">
<p class="txt_a_ac">コンテンツが入ります。</p>
</div>
</div>
</div>最初のコンテナのみaccordion_title、accordion_innerにdefaultクラスを追加しておきます。
.accordion_inner.default {
display: block;
}CSSでdisplay: block;を指定し最初のコンテナの.accordion_innerは表示しておきます。
これだけで最初のアコーディオンだけ開けておくことができます！
See the Pen accordion-sample3 by JuntaHara (@juntahara) on CodePen.
こちらは２と３の組み合わせになります。
$(function(){
// .js-accordion_titleをクリックすると
$('.js-accordion_title').click(function(){
// クリックした次の要素を展開
$(this).next('.js-accordion_inner').slideToggle();
// 展開するときjs-accordion_titleクラスにopenクラスを追加してアイコンを回転
$(this).toggleClass("open");
//クリックされた.js-accordion_title以外の.js-accordion_titleクラスに隣接する.js-accordion_innerを閉じる
$('.js-accordion_title').not($(this)).next('.js-accordion_inner').slideUp();
//クリックされた.js-accordion_title以外の.js-accordion_titleにopenクラスを外してアイコンを元に戻す
$('.js-accordion_title').not($(this)).removeClass("open");
//クリックされた.js-accordion_title.default（一番上の要素）以外の.js-accordion_titleにopenクラスを追加してアイコンを回転
$('.js-accordion_title.default').not($(this)).toggleClass("open");
});
});一番上は最初から開けているため、accordion_titleのdefaultクラスでアイコンを展開状態に変更しておくことを忘れないようにしましょう。
そのため、defaultクラス以外のaccordion_titleを展開した際に閉じるaccordion_titleのdefaultのアイコンを回転させ展開前の状態に戻してあげる処理が必要になります。
//クリックされた.js-accordion_title以外の.js-accordion_titleにopenクラスを外してアイコンを元に戻す
$('.js-accordion_title').not($(this)).removeClass("open");
//クリックされた.js-accordion_title.default（一番上の要素）以外の.js-accordion_titleにopenクラスを追加してアイコンを回転
$('.js-accordion_title.default').not($(this)).toggleClass("open");default以外の要素がクリックされた時、defaultにはopenクラスを追加してアイコンを回転させます。
ここはアイコンの開閉がずれてしまうので注意して調整しましょう。
See the Pen accordion-sample4 by JuntaHara (@juntahara) on CodePen.
HTML/CSSについては基本の部分になるので割愛します。
こちらでは閉じるボタンが押された時の処理を解説していきます。
$(function(){
// .js-accordion_titleをクリックすると
$('.js-accordion_title').click(function(){
// クリックした次の要素を展開
$(this).next('.js-accordion_inner').slideToggle();
// 展開するときjs-accordion_titleクラスにopenクラスを追加してアイコンを回転
$(this).toggleClass("open");
});
// 閉じるボタンが押されたとき
$('a.close_btn').click(function () {
//クリックされたa.close_btnの親要素.accordion_innerを閉じる。
$(this).parents('.js-accordion_inner').slideUp();
//クリックされたa.close_btnの親要素.accordion_innerの前要素にopenクラスがなければ追加し、あれば削除する。
$(this).parents('.js-accordion_inner').prev().toggleClass("open");
});
});//クリックされたa.close_btnの親要素.accordion_innerを閉じる。
$(this).parents('.js-accordion_inner').slideUp();$(this).parents：クリックされた親要素である.js-accordion_innerを閉じる処理。
//クリックされたa.close_btnの親要素.accordion_innerの前要素にopenクラスがなければ追加し、あれば削除する。
$(this).parents('.js-accordion_inner').prev().toggleClass("open");$(this).parents：クリックされた親要素である.js-accordion_innerの.prev()：前の要素にopenクラスがなければ追加する処理。
jQueryでも目的にあった動きのアコーディオンパネル自由に作れて、比較的簡単にサクッと実装できちゃうのでおすすめです！
皆さんも是非本記事を参考に実装してみて下さい！コピペも可です！
それでは！ご拝読ありがとうございました。
ともに考え、寄り添う。プロのデザインチームが即参戦。
販促ツールや一貫したデザインによるブランド構築などビジネスの成長をデザインの力で促進します。
NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。
お得な情報がLINEに届く！！
LINE公式アカウントはこちらから。
NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。
平日10:00〜19:00
© NEXTGATE LiSMOtech All rights reserved
