Submitted over 1 year ago

FAQ accordion

accessibility, typescript

Andreas Remdt•950

@andreasremdt

A solution to the FAQ accordion challenge

Preview Code

Solution retrospective

Hey there,

This is my solution to the faq accordion challenge. I've implemented it with basic HTML and CSS, no frameworks or libraries involved.

To provide some nice animations, I used a little bit of TypeScript as progressive enhancement to transition the open/closed state of the details element. However, this works completely without any JavaScript enabled.

The solution is completely responsive and focuses on accessibility and content declaration using schema.org to. It uses latest CSS features such as nesting and color-mix. Make sure to visit the live demo as the preview will be broken due to the latest Platform APIs being used.

Let me know what you think :)

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Andreas Remdt's solution.

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