jQuery selection vs pure javascript

Question

I took the example from w3cschool to build an accordion menu. The example is written in pure javascript. I want to rewrite it in jQuery but it doesn't work. This is the original:

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

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function () {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

and this is my version in jQuery:

$(".accordion").each(function (index) {
    $(this).click(function () {
        $(this).toggleClass("active");
        $(this).next().toggleClass("show");
    });
});

The item selected expands but the opened item doesn't close. Where I'm wrong in my jQuery?

Thank you!

Answer 1

You need to remove class from other accordions.

$(".accordion").click(function () {     
    var self = $(this);

    //get other accordions
    var otherAccordion = $(".accordion").not(self);
    //remove classes
    otherAccordion.removeClass("active");
    otherAccordion.next().removeClass("show");      

    //toggle classes 
    self.toggleClass("active");
    self.next().toggleClass("show");
});

And no need of .each() for binding events

Answer 2

No need of each(For loop)

First Way

(function() {

$(".accordion").click(function (index) {
   $(this).next().slideDown();   
   $(this).siblings(".accordion").next().slideUp(); 	 
});

})();

button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
background-color: #ddd;
}

div.panel {
padding: 0 18px;
display: none;
background-color: white;
}

div.panel.show {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Second Way

$(".accordion").click(function (index) {
if($(this).hasClass("active")) {
 $(this).removeClass("active");
 $(this).next().slideUp(); 
	 }
	 else {
	   $(this).addClass("active");
   $(this).next().slideDown();
	 }
	 $(this).siblings(".accordion").removeClass("active");
	 $(this).siblings(".accordion").next().slideUp(); 	 
 });

button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
background-color: #ddd;
}

div.panel {
padding: 0 18px;
display: none;
background-color: white;
}

div.panel.show {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>