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.
@hkparkjs
Posted
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
@CletsyMedia
Posted
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!🥂🍻
@approved4me
Posted
@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.
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
