Skip to content
Submitted over 2 years ago

FAQ accordion card

Blerim•270
@approved4me
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I am still struggling with the JavaScript for the accordion. I have managed to close other items, when another accordion item is opened, but I haven't found out how to close the current accordion item, when clicking it directly.

If anyone knows how to close the active menu when clicking on it, please let me know.

Thanks for viewing.

Code

Please log in to post a comment

Log in

Community feedback

  • Hyeon Park•350
    @hkparkjs

    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
  • Cletus Samuel•590
    @CletsyMedia

    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!🥂🍻

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord