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

まとめ

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

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

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

関連記事

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.09.28

    読み込みが終わったら処理!onloadイベントの使い方と注意点について解説【JavaScript】

    JavaScript

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

おすすめ記事

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

  • 2021.09.14

    【薄くて軽い!】超おすすめパソコンスタンド

    その他

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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