Skip to content
Submitted over 1 year ago

FAQ accordion solution with vanilla tech CSS | HTML | JS

accessibility, animation, bem
luis Colina•270
@Silkiercomet
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I tried to create the +/- symbol to expand the faq option using the pseudo-classes "::after" and "::before" with no convincing success, I was unable to center both elements inside the circle I'm not exactly sure how they behave in the content flow, is like they don't care but kinda care

Code

Please log in to post a comment

Log in

Community feedback

  • John Carruthers•310
    @techyjc

    Look like you have a working accordion. Great work!

    It looks like you adjusted the brightness and saturation to achieve the the required result.

    The pseudo element idea would work..

    I took part of your code/css for the cross (.expand ) and edited it to use pseudo elements. I re-created it in Codepen (see the link)- Code Pen - Pseudo Elements

    Hope this helps.

    Marked as helpful

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