CSS JavaScript

2020.11.21

【超簡単】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)を開閉してね」という命令をしています。

まとめ

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

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

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

関連記事

  • text-alignが効かない時に考えられること

    2021.02.24

    【CSS】text-alignが効かない時に考えられること

    CSS

  • 2021.02.23

    【CSS】三角形の装飾でコンテンツの境界を区切る方法

    CSS

  • 2021.02.22

    【CSS】IEだけ崩れてしまうフォント対策

    CSS

おすすめ記事

  • 2020.11.28

    Basic認証の設定方法と注意点

    その他

  • 2020.12.19

    PowerPointで目次を簡単に作る方法【スライド内リンクを設定する方法も紹介】

    その他

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design