ダーティ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を訪問してください)Reference
この問題について(ダーティjQueryのアコーディオン), 我々は、より多くの情報をここで見つけました https://dev.to/vadimfilimonov/accordion-on-dirty-jquery-480mテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol