Skip to content
Submitted 2 months ago

FAQ accordion | SCSS, Vite

Gwenaël Magnenat•1,290
@gmagnenat
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 are you most proud of, and what would you do differently next time?

I learned about the accordion pattern. It was very rewarding to test the solution with a keyboard and focus on the accessibility parts.

I'm happy to have implemented a no-script behaviour. It works when you disable javaScript and refresh the page.

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

Understanding the accessible disclosure requirement and switching the correct aria attributes based on interaction.

The documentation from APG is a bit complex on the javaScript part.

Grace post about this topic helped a lot - https://fedmentor.dev/posts/disclosure-ui/

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

How would you add animation to this solution, without changing to much the current code.

Community feedback

  • Kamran Kiani•1,280
    @kaamiikPosted 2 months ago

    Hi. Congrats for doing this. I used animation and keyframes. Using translateX and scale together with opacity. But I noticed now that It works only one time :)) Don't know why

    0
  • geomydas•1,440
    @geomydasPosted 2 months ago

    Doesn't work for me when I disable Javascript on Firefox using uBlock Origin. Maybe adding a transform: translateY(100%) and adding overflow-y: hidden

    0
    Gwenaël Magnenat•1,290
    @gmagnenatPosted 2 months ago

    @geomydas did you refresh the page after disabling JavaScript? It works for me on Firefox with uBlock Origin. Make sure to reload the page.

    0
    geomydas•1,440
    @geomydasPosted 2 months ago

    @gmagnenat Still doesn't work for me. Tried Ctrl R, Ctrl Shift R, refreshing the page manually. It has all of the accordions already opened instead of being toggled

    0
    Gwenaël Magnenat•1,290
    @gmagnenatPosted 2 months ago

    @geomydas ah that is a misunderstanding. This is the expected behaviour. When JavaScript is disabled all content should be opened and visible.

    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