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

まとめ

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

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

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

0

関連記事

  • 2021.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

  • 2021.07.14

    CSSだけで固定背景(パララックスデザイン)を実装する方法【iOS対応方法も紹介】

    CSS

  • 2021.07.13

    (簡単)inputをクリックしたときの枠線の色を変える

    CSS

おすすめ記事

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!