Skip to content
Submitted 11 months ago

Accessible CSS only accordion made with Sass / scss

beowulf1958•1,450
@beowulf1958
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

There were a few things I was unable to solve:

How can I get a radio button to focus and active using keyboard?

The background doesn't look quite right on my smart phone; am I doing something wrong with background-image?

Community feedback

  • Sean Buckle•410
    @seanbucklePosted 11 months ago

    You have used <details></details> and <summary></summary>, so the keyboard functionality for focus is built-in. Use the tab key and spacebar or enter.

    In terms of the background image, check your file path. See below:

    ./app/assets/images/background-pattern-desktop.svg
../../assets/images/background-pattern-mobile.svg
    Marked as helpful
    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