【超簡単】jQueryとCSSでアコーディオンを実装する方法

アコーディオンは、LPの「よくある質問」などでよく利用されていますね。

「Q 質問」をクリックすることで、「A答え」が開閉されるような動作です。

アコーディオンは、一見難しそうですがjQueryとCSSで簡単に実装することができます。

アコーディオンとは

一応アコーディオンとは何かご説明しますと、クリックでコンテンツを開閉することができる機能のことです。

本来アコーディオンは、「一方を開いたら、連動して他方を閉じる(常に1つしか開かない)」動作をする機能のことをいいます。

しかし、実装が簡単かつ使い勝手がいいことから、「連動することなくシンプルにクリックで開閉するだけ」という動作がよく使われています。

今回は使い勝手のいい後者のアコーディオンをご紹介します。

アコーディオンを実装

アコーディオンのデモは以下の通りです。

わかりやすいように、スタイルは限りなく省いています。

See the Pen accordion by spiqa design (@spiqa_design) on CodePen.

CSS

開閉するコンテンツをdisplay: none;で非表示にします。
これを指定しておかないと、最初にコンテンツが開いた状態になります。

CSSで対応することはこれだけです。

jQuery

タイトル(クリックする箇所)のクラスをjqueryに指定します。
デモの場合は、toggle_titleです。

どういう内容が書かれているか簡単に説明しますと、
「toggle_titleをクリックしたら、次の要素(dd)を開閉してね」という命令をしています。

まとめ

たったこれだけで、アコーディオンが実装できました。

今回は動きについて焦点を当てて解説したためスタイルは限りなく排除しましたが、開閉に応じて「＋」と「－」が変化するなど、装飾をつけた方がデザインがぐっと良くなります。

スタイルを調整したアコーディオンも、今後スピカノートで紹介したいと思います。