※当サイトではアフィリエイト広告を利用しています

jQuery

【jQuery】アコーディオンメニューの作り方

 
【jQuery】アコーディオンメニューの作りかた

サイトのQ & Aセクションなどをみていると、
質問部分のクリックで、回答の表示・非表示が切り替わるメニューがありますよね。

今回はjQueryを使ったアコーディオンメニューの作成手順をまとめてみたいと思います。
こんなかんじのデモを作ってみました。

See the Pen
PoZjvGG by notebook (@orange-notebook)
on CodePen.

質問と書いてあるタブをクリックすると、対応した回答の表示・非表示が切り替わります。

また質問タブの右にあるプラスとマイナスのマークも
回答の表示状況によって連動して切り替わるようになっています。

それでは作り方をみていきましょう。

クリックできる目次

HTML / CSS / jQuery のおおまかな役割

まず作る前にHTML / CSS / jQueryの役割分担的なことをまとめてみたいと思います。
いろいろな作り方があると思いますが、今回のケースでまとめています。

HTML：

  • クリックできる「質問」タブと、クリニックに伴って現れる「回答」部分を作る。

CSS：

  • デフォルトでは「回答」部分を非表示にする。
  • 「質問」部分のカーソルをポインターにして、クリックできると分かるようにする。
  • 質問タブ右のプラスマークを擬似要素で表示させる。
  • 質問タブにactiveクラスがついたら、プラスの代わりにマイナスマークを表示させる。

jQuery：

  • jQueryを読み込む。
  • 「質問」タブがクリックされたら、ペアとなっている「回答」の表示・非表示を切り替える。
  • クリックによって「質問」タブのactiveクラスの付け替えをする。(プラス、マイナスマークの表示を切り替えるため)

ではそれぞれもうすこし詳しくみていきましょう。

HTML

<div class="accordion__container">
  <div class="accordion__tab">
    質問 1
  </div>
  <div class="accordion__content">
    <p>回答 1</p>
  </div>
    <div class="accordion__tab">
    質問 2
  </div>
  <div class="accordion__content">
    <p>回答 2</p>
  </div>
    <div class="accordion__tab">
    質問 3
  </div>
  <div class="accordion__content">
    <p>回答 3</p>
  </div>
</div>

「.accordion__container」クラスのついたdivを用意しました。
アコーディオンメニューの箱のイメージで、全体のサイズ調整などを行います。

その中に、質問タブにあたる「.accordion__tab」と、回答部分にあたる「.accordion__content」クラスがついたdivタグを交互に書いています。

CSS

まずCSSの全体像です。

.accordion__container {
  max-width: 500px;
  width: 90%;
  margin: 20px auto 0;
  border: 1px solid gainsboro;
  border-bottom: 0;
}
  
.accordion__tab {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
  border-top: 0;
  border-bottom: 1px solid gainsboro;
}

.accordion__tab::after {
  content: "＋";
  position: absolute;
  right: 20px;
}

.accordion__tab.active::after {
  content: "ー";
}    

.accordion__content {
  padding: 10px 20px;
  display: none;
  background: whitesmoke;
  border-bottom: 1px solid gainsboro;
}

 

デフォルトでは回答部分を非表示にしておきたいので、
「.accordion__content」に「display: none;」を指定します。

.accordion__content {
  padding: 10px 20px;
  display: none;
  background: whitesmoke;
  border-bottom: 1px solid gainsboro;
}

 

今回、質問部分の「.accordion__tab」はdivタグで作っています。

そのためカーソルを合わせてもクリックできるか分かりにくいので、「cursor: pointer;」でホバーしたときにカーソルの形になるようにします。

.accordion__tab {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
  border-top: 0;
  border-bottom: 1px solid gainsboro;
}

 

質問タブの右端のプラスマークをCSS擬似要素の::afterで作っていきます。

まず親要素にあたる「.accordion__tab」に「position: relative;」を指定し、
::afterの位置を調整する基準点とします。

.accordion__tab {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
  border-top: 0;
  border-bottom: 1px solid gainsboro;
}

 

擬似要素「.accordion__tab::after」に下記プロパティを設定していきます。

  • position: absolute;
  • right: 20px; (.accordion__tabのpaddingに合わせて位置調整。)
  • content: “＋”; (今回はアイコンではなく、普通の記号で作っています。)
.accordion__tab::after {
  content: "＋";
  position: absolute;
  right: 20px;
}

 

また質問タブがクリックされ、回答が表示されたら記号をプラスからマイナスに変更します。

そのため「.accordion__tab」にactiveクラスがついたら、::afterの「content」をマイナスマークに変更します。

.accordion__tab.active::after {
  content: "ー";
}

jQuery

今回のHTML構造では、同じ階層に質問タブの「.accordion__tab」と、回答部分の「.accordion__content」があります。

そのため質問タブがクリックされたら、クリックされた直後の兄弟要素を取得(next())し、
スライドトグルを使って表示・非表示の切り替えをしたいと思います。

$(".accordion__tab").click(function(){
    $(this).next(".accordion__content").slideToggle();
});

これで質問をクリックすると、
回答の表示・非表示をスライドで切り替えられるようになりました。

あとはプラスとマイナスマークを切り替えていきます。

質問タブがクリックされたら、クリックした質問タブのactiveクラスを付け替えたいので、
thisとtoggleClassを使い、下記一文を追加します。

$(".accordion__tab").click(function(){
    $(this).toggleClass("active");
    $(this).next(".accordion__content").slideToggle();
});

これで回答が表示されていないときはプラス、回答が表示されているときはマイナスが表示されるようになりました。

これで完成です！

 

またこちらの記事ではJavaScriptでアコーディオンメニューを作ってみたので、
よろしければご参照ください。

【JavaScript】アコーディオンメニューの作りかた
【JavaScript】アコーディオンメニューの作り方今回はJavaScriptでのアコーディオンの作りかたをまとめてみたいと思います。...

以上、jQueryを使ったアコーディオンメニューの作りかたでした。

【jQuery】モーダルウィンドウの作り方
【jQuery】モーダルウィンドウの作り方今回はjQuerを使ったモーダルウィンドウの作り方をまとめてみたいと思います。...
【クリックでページトップへ】スクロールトップボタンの作りかた【jQuery】
【クリックでページトップへ】スクロールトップボタンの作り方【jQuery】サイトをスクロールしていると、途中で下のあたりからふわっと現れるボタンってありますよね。 押すとページのトップまで、ぐいーんと戻ってくれるボタンです。 今回は、jQueryを使ってスクロールトップボタンを作ってみたいと思います。...
関連する記事