ダーティjQueryのアコーディオン


Textbook example! Not to be used anywhere!


HTML


トリガーと内容だけを加えましょう
<button class="js-accordion">
  Click me?
</button>
<div class="content">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic iure eaque id repudiandae autem doloremque asperiores dolorum ullam molestias! Quidem sint quis quam quisquam at rem repellat! Magni, doloribus eaque!
</div>

CSS


デフォルトのコンテンツを隠す
.content {
  display: none;
}

jquery


// When you click on the button
$('.js-accordion').on('click', function() {
  // expand the next element 
  $(this).next().slideToggle();
});
結局、すべての魔法は.slideToggle()の方法にあります.あなたは.next().on()についてもっと読むことができます.しかし、おそらく私のcodepenを訪問してください)