Responsive accordion using HTML, Vanilla CSS and JS

Community feedback

• 

  Harsh Kumar•1,390

  @thisisharsh7Posted about 2 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..

  Marked as helpful

  0

  ---

  

  Alvin•140

  @alvyynmPosted about 2 years ago

  @thisisharsh7 thank you so much. I had already figured out I will need to loop through all the buttons and check which button was clicked, but my issue was I didn't know how to put all the logic together. Your solution helped, thank you!

  0
• 

  Felipe Chaves•240

  @loopchavesPosted about 2 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.

  Marked as helpful

  0

  ---

  

  Alvin•140

  @alvyynmPosted about 2 years ago

  @loopchaves thank you so much. I haven't come across the details tag until now.

  0