超簡単!!開閉アコーディオンをレスポンシブ対応でコピペ実装！

jQueryをコピペするだけでアコーディオンが実装できるコードを紹介。

セレクターの指定も複雑ではないので、環境に合わせて簡単に適応出来るかと思います。

js

$(function(){
	$(".accordion p").click(function(){
	    $(this).next("ul").slideToggle();
	    $(this).toggleClass("open");
	});
});

html

<ul class="accordion">
    <li>
        <p>ここをクリックするとアコーディオンが開閉</p>
        <ul>
            <li>ここに内容</li>
            <li>ここに内容</li>
            <li>ここに内容</li>
        </ul>
    </li>
</ul>

CSS

.accordion p{
	cursor: pointer
}
.accordion ul{
	display:none;
}

この三種類のコードをコピペするだけでアコーディオンが実装できます。

WordPressの場合はjsを下記で記載。

WordPressの場合

( function( $ ) {
	$(function(){
		$(".accordion p").click(function(){
		    $(this).next("ul").slideToggle();
		    $(this).children("span").toggleClass("open");
		});
	});
} )( jQuery );

としてあげてください。