user7047368 user7047368 - 15 days ago 4
HTML Question

Jquery Accordion tab don't close clicking on the button

Hi in my website i am having a job portal page where i used jquery accordions to open and close the details of the jobs posted.Here when i click on the more info button the accordion tab is expanding but again when i click on more info button it is not closing and only for the first one it is opening towards down and for the rest it is opening towards up.here is my code.

<div class="digitalmarketingassociate">
<span class="digit">Digital Marketing Associate</span>
<div class="applynow">Apply Now</div>
<div class="moreinfo accordion" >More Info</div>
<div class="panel">
<p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
<div class="juniorqaengineer">
<span class="digit">Junior QA Engineer</span>
<div class="applynow">Apply Now</div>
<div class="moreinfo accordion1">More Info</div>
<div class="panel">
<p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
<div class="junioriosdeveloper">
<span class="digit">Junior iOS Developer</span>
<div class="applynow">Apply Now</div>
<div class="moreinfo accordion2">More Info</div>
<div class="panel">
<p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>


Jquery:

var acc = document.getElementsByClassName("accordion");
var i;
var currentActive;
var toggleAccordionState = function(accordion) {
accordion.classList.toggle("active");
accordion.nextElementSibling.classList.toggle("show");
};

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
if(currentActive) {
toggleAccordionState(currentActive);
}
toggleAccordionState(this);
currentActive = this;
}
}
var acc = document.getElementsByClassName("accordion1");
var i;
var currentActive;
var toggleAccordionState = function(accordion) {
accordion.classList.toggle("active");
accordion.nextElementSibling.classList.toggle("show");
};

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
if(currentActive) {
toggleAccordionState(currentActive);
}
toggleAccordionState(this);
currentActive = this;
}
}
var acc = document.getElementsByClassName("accordion2");
var i;
var currentActive;
var toggleAccordionState = function(accordion) {
accordion.classList.toggle("active");
accordion.nextElementSibling.classList.toggle("show");
};

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
if(currentActive) {
toggleAccordionState(currentActive);
}
toggleAccordionState(this);
currentActive = this;
}
}

Answer

First of all, use a single class named accordion like this : <div class="moreinfo accordion">More Info</div>. It helps to write more effective and easy to understand . Javascript code looks like this:

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

HTML code

<div class="digitalmarketingassociate">
              <span class="digit">Digital Marketing Associate</span>
              <div class="applynow">Apply Now</div>
              <div class="moreinfo accordion" >More Info</div>
                <div class="panel">
                    <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
            </div>                    
            </div> 
            <div class="juniorqaengineer">
              <span class="digit">Junior QA Engineer</span>
              <div class="applynow">Apply Now</div>
              <div class="moreinfo accordion">More Info</div>
              <div class="panel">
                    <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
                </div>                
            </div>              
            <div class="junioriosdeveloper">
              <span class="digit">Junior iOS Developer</span>
              <div class="applynow">Apply Now</div>
              <div class="moreinfo accordion">More Info</div>
              <div class="panel">
                    <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>                               
                </div>            
            </div>
</div>

Further more , use a style class named .show

.show {
    display: none;
}

Here is a working solution

Comments