コピペで簡単！jQueryでアコーディオン（開閉メニュー）を作る

2017年8月29日2018年8月8日

すぐに使えるコードをいっぱい持っておくと、
いろいろな仕事を振られたときに迅速な対応が出来るようになっていきます。
みなさんこんにちわ
今回は、メニューやFAQなどでよく見るアコーディオンを、
コピペで簡単に使えるように用意しましたのでよければお使いください。

jQueryの準備をする

まずはjQueryのライブラリーが必要になります。

特に何もなければ最新版をダウンロードします。

ダウンロードしたら、サ―バーの任意の場所にアップロード
下記のコードを使用するページ内に記述

headタグの間に"><script～</script>までを記述します

下のjQueryをコピーしてHTML内に貼り付ける
貼り付ける場所はjQueryのライブラリーを読み込んだ後ならどこでもいいです
推奨は、「任意の名前.js」を作成しそこに貼り付け
難しければ、HTMLのできるだけ最後に貼り付けましょう。

<script>
$(function (){
if($('[class^="js-toggle"]')){
$('.js-toggle__tit').on("click", function() {
var element = $(this);
var toggleClass = element.parent('[class^="js-toggle"]')[0].className.split(' ')[0];
$('.'+toggleClass+' dd').not(element.next()).slideUp(100);
$('.'+toggleClass+' dd').not(element).removeClass('is-active');
element.next().slideToggle(100);
element.toggleClass('is-active');
});
}
});
</script>

簡単に作成できるようにするために「dl,dt,dd」で作成しています。
構造を変更すると、動作しませんのでご注意ください。

CSSはそのままコピーして張り付け

開くをクリックすると内容が出てきます。

HTMLの構造さえ変えなければメニューにも記事の中でも使用できます。
実際にFAQなどでよく使用します。

jQueryの知識が少しあれば、セレクタを変更することでさらに応用ができます。
さらっと使って楽に仕事しましょう！
ではでは〜

まだ、コメントがありません

コメントを投稿するにはログインしてください。