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

@iamkayleb

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This project was a bit difficult as this is my first time working with accordions.

The part I found most difficult was creating a program that allows only one accordion open at a time. Glad I got that fixed later on.

The part where the accordion icon toggles between "icon-plus" and "icon-minus" is where I still can't seem to fix. I will really appreciate your help on that part?

P.S Let me know if there's anyway I can make my code better.

Arigato!

Community feedback

P
Dean 480

@Deanogit

Posted

Hi @iamkayleb,

I was taking a look at your code to see if I could help with your question The part where the accordion icon toggles between "icon-plus" and "icon-minus" is where I still can't seem to fix. I will really appreciate your help on that part?

One way to achieve the toggle would be to declare both icons in your HTML, and use a hidden class to show and hide the icons. So the minus icon would start with a hidden class, which would be removed when needed, when minus icon is visible the plus icon would become hidden.

There are a few different approaches to applying this method, here's some further reading

I 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