Submitted 10 months ago

Accessible CSS only accordion made with Sass / scss

beowulf1958• 1,170

@beowulf1958

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

FAQ accordion

HTML
CSS
JS

1newbie

View challenge

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

@seanbuckle

Posted 9 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

Please log in to post a comment

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