jQueryで簡単にアコーディオンメニューを作る方法

jQueryとCSSで簡単にクリックした時に表示されるアコーディオンメニューの実装方法を紹介します。
スマホのメニューやQ&Aなどの答えを隠しておく時などによく使用されているアコーディングメニューを実装しよう!

 

 

jQueryで作る簡単アコーディオンメニュー

それでは実際に作っていこう!

 

実装方法

HTMLを用意する

<div class="btn">ボタン</div>
<ul>
<li>
<p>コンテンツ</p>
</li>
<li>
<p>コンテンツ</p>
</li>
<li>
<p>コンテンツ</p>
</li>
<li>
<p>コンテンツ</p>
</li>
</ul>

 

こんな感じ!
「btn」はクリックするためのボタンです。
class名など任意のものに変更してください。

 

CSSを書く

ul{
display: none;
}

 

今回は最低限のスタイルを当てています。
他の部分は自由にスタイルを当てましょう!

 

今回は「display: none;」で出てくる方のコンテンツを隠します。

 

jQueryを書く

$(".btn").on("click", function () {
$(this).next().slideToggle();
});
});

 

class「btn」が付いたものをクリックした時、その下のコンテンツを表示させます。
「slideToggle()」は「要素の表示・非表示」をさせることが可能です。

 

これで完了!

コメント