コピペで簡単にできるクリックしたら展開するアコーディオンメニュー【jQuery】

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

よくある質問やコンテンツが長い部分でよく使用されるクリックすると展開するアコーディオンメニューを簡単に実装できるソースを公開。
コピペで簡単に実装することができるのでぜひ試してみてください。

ではいってみよう!

サンプルHTML

クリックすると展開する起点となる部分に「btn」とclassを付けます。
好きな名前に変更可能です。

<ul>
<li>
<div class="btn">ボタン</div>
<div class="content">
<p>テストテストテストテストテストテストテストテストテストテストテストテスト</p>
</div>
</li>
</ul>

サンプルCSS

最初にコンテンツが見えないように非表示の設定をしておきます。

ul li .content{
display: none;
}

jQuery

「btn」をクリックすることで展開します。
【非表示になっている場合】
slideUpで非表示。

【非表示になっている場合】
slideDownで表示。

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

こんな感じで簡単に実装できます!
ぜひ実装してみてください!

コメント