Skip to content
Submitted 10 months ago

FAQ accordion solution with vanilla tech CSS | HTML | JS

luis Colina•200
@Silkiercomet
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

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

Community feedback

  • John Carruthers•310
    @techyjcPosted 10 months ago

    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
    1
    luis Colina•200
    @SilkiercometPosted 10 months ago

    @techyjc thank you john you the man!

    1
    John Carruthers•310
    @techyjcPosted 10 months ago

    @Silkiercomet Sorted out the JS so it now works as expected. I made a typo.😂 Just didn't see it until after 30 minutes of troubleshooting. 😳

    0
    luis Colina•200
    @SilkiercometPosted 10 months ago

    @techyjc yeah it happens

    0

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