Skip to content
Submitted 6 months ago

mobile first faq accordion

Joseph K. L Lartey•430
@FlackoCodes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

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

  • Koda👹•3,830
    @kodan96Posted 6 months ago

    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
    Joseph K. L Lartey•430
    @FlackoCodesPosted 6 months ago

    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

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