Responsive accordion using HTML, Vanilla CSS and JS

Community feedback

• 

  Harsh Kumar•5,480

  @thisisharsh7

  Posted almost 3 years ago

  Hey Alvin, great work! your solution looks perfect. In order to resolve your query to close an open accordion when you open another. You can make a new function outside the for loop in your code and then calls it inside the add event listener after the end of if-else statement. Consider an example function like this

  function whichButtonClicked(x){ //here x takes the value which button clicked by user
        for(let i=0;i<btns.length;i++){
                if(i!=x){ //do this for all non-clicked button by the user
                           answers[i].classList.add("hidden");
                           btnQuestion[i].classList.remove("active");
                           accordionIcon[i].classList.remove("rotate-icon");
                  }
           }
   }
  

  Now call this function before the end of add Event listener in your code like this whichButtonClicked(i);

  I hope this answers your query..

  01

  Marked as helpful
• 

  Felipe Chaves•240

  @loopchaves

  Posted almost 3 years ago

  Hi, Alvin!

  You can use the <details> tag instead of <button> to make the accordion. When you click on a <details>, the "open" attribute is added, which means that <details> is open. Just remove the "open" attribute from the rest of the <details> using JavaScript.

  See more about details tag in this link.

  01

  Marked as helpful