如何在 jQuery 中编写手风琴 JavaScript

Question

I'm a beginner and I'm having a problem in writing my accordion JavaScript code to jQuery.

Here is my JavaScript code

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");  
  });
}

Here is the jQuery I tried

$(".accordion").each(function(index) {
    $(index).click(function() {
        $(this).slideToggle("slow")
    })
})

I tried it but it didn't work. Does anyone know how to fix it?

Answer 1

You can use this

 $(".acc").on("click", function() { $('.acc>p').hide("slow"); // hide all $(this).find("p").show("slow"); /// show content })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="acc"> <p style="height: 60px; background: lime; display:none;">Hello World</p> <button>Change color</button> </div> <div class="acc"> <p style="height: 60px; background: lime; display:none;">Hello World</p> <button>Change color</button> </div>

Answer 2

There is no need to loop through elements using jQuery, it will do for you;)

$('.accordion').on('click',function(){
    $(this).slideToggle("slow");
});

That's all!