j-9動きのあるアコーディオン

htmlでリストデザインしておく。全体のul クラスは accordion
親リストタイトルは段落とspanで囲む

リストデザインはcss等で完成させておく

jqwery本体読み込み

jsの読み込み

<script>
$('.accordion p').click(function() {
    $('.accordion p').removeClass("selected").next().slideUp();
    $(this).toggleClass("selected").next().slideToggle();
}).next().hide();
</script>

追加のcss

子リストは見えないように

.accordion ul { display:none;}
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次