東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

【jQuery】指定した個数づつ開くアコーディオン

2022.03.18 Posted by

こんにちは、今回は「指定した個数づつ開くアコーディオン」をjQueryで実装したいと思います。

以前案件で作成する際、意外と面倒だったので使いまわせる形としてここに残しておきたいと思います。

 

まずはDEMOを作成しましたので挙動をご覧ください。アコーディオンにしたい要素の個数を変えて3パターン(偶数個、奇数個、少ない個数)を用意しました。

 

DEMO

 

最初に2個表示して、2個ずつ開く形にしています。アコーディオンにしたい要素の個数が2個以下になったらボタンを非表示にするという仕様です。

 

以下のページを参考にさせていただきました。記事作成者に感謝です!

 

[Qiita]【jQuery】要素をn個ずつ表示するtoggleボタン【ぬるっと】

 

参考ページではアコーディオンを複数設置するのに対応していなかったので、私の方で複数設置したり使いまわせるよう作り直してみました。

 

以下がソースになります。

 

■HTML(アコーディオン部分)

 

構造は単純で.accordion_box内に.accordionがアコーディオンにしたい部分、.triggerがアコーディオンを開くボタンとなっています。

 

■CSS

 

CSSは/* 必須 */と書いてあるところがポイントで、要素の非表示用のクラスを用意しボタンも予め非表示にしておきます。

 

■javascript

 

javascript部分の説明は一緒に記述しときました。numに何個づつ開くか、d_numに最初に表示しておきたい個数を自由に指定できるようにしました。基本的にここの数値だけ変えれば色んな形に対応できるようにしています。

再度DEMOのリンクを載せときますね。

 

DEMO

 

出来る限り使いまわししやすい形にして色んなパターンの確認をしましたが、それでもバグなどあったらごめんなさい。

 

簡単に出来そうに見えて意外と面倒な「指定した個数づつ開くアコーディオン」、是非自由にご利用ください。

以上、このあたりで終わりたいと思います。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278