FAQ accordion card

Community feedback

• 

  Hyeon Park•350

  @hkparkjsPosted almost 2 years ago

  Hi, Blerim 👋

  Good work on this challenge! 👍

  I had the same issue you have, and I used .classList.add()/remove() directly instead of using toggle() to solve the problem.

  For the detail, you can refer to my challenge page. https://www.frontendmentor.io/solutions/faq-accordion-card-YtmRMSmpPL

  I hope my comment is helpful for you :)

  Have a nice day! ✨

  Marked as helpful

  0
• 

  Cletus Samuel•590

  @CletsyMediaPosted almost 2 years ago

  Clear the active CSS you used for JS and add this to your CSS /* Correction / .accordion_answer { max-height:0; overflow: hidden; transition:max-height 1.4s ease; } .active .accordion_answer{ max-height:10rem; } .active .arrow{ transform: rotate(180deg); } .active .accordion_question{ color: #000; } .arrow { transition: 350ms all; } / Correction End*/

  Delete your JS code and add this js code to it and it will solve the issue // Solution const answer = document.querySelectorAll(".accordion_element");

  answer.forEach(answer =>{ answer.addEventListener("click", ()=>{ answer.classList.toggle("active") }) }); If it solves the issue, hola at me. Happy holidays!🥂🍻

  0

  ---

  

  Blerim•270

  @approved4mePosted almost 2 years ago

  @CletsyMedia Thanks for the review, unfortunately this isn't working as described.

  Check the CodePen I have updated according to your suggestions https://codepen.io/approved4me/pen/zYLvXdM

  Also, the JS code provided just toggles the class active, but doesn't close automatically the remaining accordion answers. My goal is to only have one accordion element open and also be able to close this last opened element, when clicking on it.

  I hope you are able to understand my goal here.

  Thanks for your help and Happy holidays to you too.

  0