Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ Accordion Card

@nexsalvarez

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I didn't find a way to shrink one responsive panel when the other is clicked open, how would you do it?

Community feedback

@MerMory-Alloc

Posted

Great work here, I liked how you did some magic to it with animation. about you question you can add this code inside the event function.

for(j=0; j < btnAccordion.length; j++){
      if(btnAccordion[j].innerHTML != this.innerHTML){
        btnAccordion[j].classList.remove("active");
        btnAccordion[j].nextElementSibling.style.display= "none";
        btnAccordion[j].firstElementChild.style.transform = 'rotate(0deg)';
    }
}

it basically will iterate through all the answers(btnAccordion elements) then checks if it is the element that just got clicked or not . if it is not, it will remove the class active from it and hide it. Hope this helps .

0

Please log in to post a comment

Log in with GitHub
Discord logo

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