robyg72 robyg72 - 24 days ago 6
Javascript Question

jQuery selection vs pure javascript

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

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>

Comments