目次
jQueryをコピペするだけでアコーディオンが実装できるコードを紹介。
セレクターの指定も複雑ではないので、環境に合わせて簡単に適応出来るかと思います。
js
|
1 2 3 4 5 6 |
$(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).toggleClass("open"); }); }); |
html
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="accordion"> <li> <p>ここをクリックするとアコーディオンが開閉</p> <ul> <li>ここに内容</li> <li>ここに内容</li> <li>ここに内容</li> </ul> </li> </ul> |
CSS
|
1 2 3 4 5 6 |
.accordion p{ cursor: pointer } .accordion ul{ display:none; } |
WordPressの場合はjsを下記で記載。
WordPressの場合
|
1 2 3 4 5 6 7 8 |
( function( $ ) { $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); }); } )( jQuery ); |