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

mobile first faq accordion

@FlackoCodes

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


What challenges did you encounter, and how did you overcome them?

The major challenge was the responsiveness and the switch between the plus sign and minus when the toggle function is fired.

I managed to use margin to make it work fine.

What specific areas of your project would you like help with?

I'm facing an issue with changing the plus icon to a minus icon when the paragraph is visible. I've tried using the toggle method to switch between classes, but it's not working as expected. Any suggestions or feedback on how to solve this issue would be greatly appreciated

Community feedback

P
Koda👹 3,810

@kodan96

Posted

hi there! 👋

Maybe it's just me (I s*ck at reading others code), but I don't see where you are trying to toggle either of the icons in your code. You are toggling a class to the 'p' element using the addEventListener method, but you are not toggling the icons themselves.

You can try to add these to your eventListener:

plusIcon[index].style.display = 'none';
minusIcon[index].style.display= 'inline';

where minusIcon is (surprise) the minus icon which closing the tabs. Then you should also add another eventListener to minus icon to reverse the whole thing.

Or you can check my solution, but I used jQuery to complete it.

Hope this helped, Good luck and happy coding!

Marked as helpful

1

@FlackoCodes

Posted

Hello @kodan96 I did exactly (added another event listener for the icon-minus) just that and it worked for me.

Thanks man.

1

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