It is impossible to find an error, why the class is not removed when clicking on an element that already has this class html:

<div class="panel"> <div class="panel-heading"><h4>panel 1</h4></div> <div class="panel-collapse"> <div class="panel-body"> <p>1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch..</p> </div> </div> </div> <div class="panel"> <div class="panel-heading"><h4>panel 2</h4></div> <div class="panel-collapse"> <div class="panel-body"> <p>2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.</p> </div> </div> </div>

js:

 function ready() { var panels = document.getElementsByClassName("panel"); var i; for (i = 0; panels.length > i; i++) { panels[i].onclick = function() { for (i = 0; panels.length > i; i++) { panels[i].classList.remove("active"); } if (this.classList.contains("active")) { this.classList.remove("active") } else { this.classList.add("active") } }; } } document.addEventListener("DOMContentLoaded", ready);
  • really, thank you, spent min 30 because of this) - Dima Vleskov

2 answers 2

You can do without cycles inside the handler.

The getElementsByClassName function returns a live collection. Thus, once received a collection for the class active

 var actives = document.getElementsByClassName('active');

It will always be relevant data. And since it means only one active element, it will be available at index 0.

Now it is enough to check in the handler that the previous active element was and remove the active class from it.

 var currentActive = actives[0]; if (currentActive) currentActive.classList.remove("active");

And if you clicked not on the active element - you need to add the active class to this element.

 if (currentActive !== this) this.classList.add("active");

Example assembly:

 var panels = document.getElementsByClassName("panel"); var actives = document.getElementsByClassName('active'); for (i = 0; panels.length > i; i++) { panels[i].onclick = function() { var currentActive = actives[0]; if (currentActive) currentActive.classList.remove("active"); if (currentActive !== this) this.classList.add("active"); }; } 
 .active { border: solid 2px green; } 
 <div class="panel"> <div class="panel-heading"> <h4>panel 1</h4> </div> <div class="panel-collapse"> <div class="panel-body"> <p>1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch..</p> </div> </div> </div> <div class="panel"> <div class="panel-heading"> <h4>panel 2</h4> </div> <div class="panel-collapse"> <div class="panel-body"> <p>2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.</p> </div> </div> </div>

    in the loop skip the item that was clicked

    i.e.

     for (i = 0; panels.length > i; i++) { if (panels[i] != this) panels[i].classList.remove("active"); }
    • something is wrong, if we click on the panel, then this should open and the other panels close, but if we click on it, then it should close - Dima Vleskov
    • @DimaVleskov using the button "Fragment of code on ...", please create in your question a working example in which "something is wrong" - Igor