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

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

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

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

アコーディオンとは

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

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

しかし、実装が簡単かつ使い勝手がいいことから、「連動することなくシンプルにクリックで開閉するだけ」という動作がよく使われています。(この場合ドロップダウンと呼ぶのが正しいかもしれませんね)

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

まずはシンプルなアコーディオンを実装してみよう！

実際にWebサイトに実装する時はいろいろとスタイルを整えておしゃれにしますが、まずはわかりやすいように動きのみを確認できるアコーディオンを作ってみましょう。

以下、サンプルコードです。

質問の領域をクリックすると答えが下からニュッと出てきます！

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

各言語ごとに解説します！

CSS

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

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

jQuery

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

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

プラスアイコンが連動するアコーディオン

シンプルなアコーディオンを実装したところで、少し応用を取り入れたアコーディオンを作ってみましょう。

シンプルなアコーディオンだと、クリックしてコンテンツが表示されるというのが見た目ではわかりづらいです。

そこで、開閉に応じて「＋」と「−」が切り替わる、というアコーディオンを作ってみましょう！

視覚的に開いているか閉じているのかわかりやすいのでおすすめです！

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

追加したのは、.plusのスタイルのみです！

.toggle_titleに.selectedがついている時は、＋を−にするという記述を忘れずに記述しましょう。

最初だけ開いておくアコーディオン

もっと「ここアコーディオンです！」とわかりやすくする場合は、最初のアコーディオンだけ開いておくというのもありです！

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

HTMLで最初の.toggle_titleに.selectedをつけておき、CSSで最初の.toggle_ansにdisplay: block;を指定するだけです！

まとめ

あとはWebサイトのデザインに合わせてアコーディオンにスタイルを加えてください！

とても簡単なコードですが、都度書くとなると面倒なのでコピペでご活用いただけると幸いです！

[card url=”https://note.spiqa.design/wp/javascript-book/”]