jQueryでアコーディンを実装する方法

jQueryで色々なアコーディオンを実装する方法をまとめていきます。

特定のアコーディオンのみ表示させておく

アコーディオンを実装する時、特定のアコーディオンのみを初期表示させておきたい場合、.hasClass()を使用すると簡単に実装できます。

一番上のアコーディオンにのみis-openというclassを追加しておき、このclassが付いている時はアコーディオンが開いている状態になるように設定しています。

See the Pen
Accordion Menu by gri-t (@gri-t)
on CodePen.

要素の数が特定数以上になった時にのみ、アコーディオンを適応させる方法です。以下では、要素が３つ以上になった場合にアコーディオンが適応されるように設定しているので、「HTML」タブ内でコメントアウトされている箇所を解除すると、アコーディオンが適応されます。

See the Pen
vYNggRd by gri-t (@gri-t)
on CodePen.

次は、アコーディオンのコンテンツ内に閉じるボタンを設定する方法です。

コンテンツ内のテキスト量が多いなど、シチュエーションによってはコンテンツ内に閉じるボタンがある方が開閉がスムーズになり便利かと思います。