CODEWITHSUNDEEP
htmlcss
maru
maru

Reputation: 35

changing the open icon into close icon when accordion is clicked (active open)

so far I have this code accordion. I've included *open and closed icons on "accordion class".

.accordion::after {
content: " ";
background: url("../image/icons/w-open.svg");   <!-- icon when not open-->
right: 0;
display: block;
background-repeat: no-repeat;
height: 28px;
width: 28px;
margin: 10px auto;
}
.accordion[aria-expanded="true"] {
  background: url("../image/icons/w-close.svg");   <!-- icon when open-->
}
<div class="col-md-6 col-sm-12 col-xs-12">                          
  <a class="accordion defaultcolor">
    Accordion Title
  </a>  

  <div class="panel">
    <p>Accordion Text Content</p>
  </div>
</div>

The collapsing accordions are working fine, except the changing icons when the accordion is collapsed (open).

how could I successfully working the changing icons smoothly?

FOR UPDATE: I use this js to be able to do the active(show) accordion:

var accordions = document.querySelectorAll("a.accordion");

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

 function hideAll(exceptThis) {
    for (var i = 0; i < accordions.length; i++) {
      if (accordions[i] !== exceptThis) {
        accordions[i].classList.remove("active");
          accordions[i].nextElementSibling.classList.remove("show");
     }
   }
 }

this js code is perfectly working fine. but still the icon won't change.

Anyone can help me of this problem?

Upvotes: 0

Views: 1109

Answers (1)

PythonProgrammer
PythonProgrammer

Reputation: 226

For this you could be usind the html "details" and "summary" tags. These function like an accordion and give an icon as well

 <details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

Upvotes: 0

Related Questions