Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Accessible Accordion using Astro, Svelte, and Tailwind v4 Alpha

@Brian-Pob

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I used Svelte with Astro to handle the JavaScript in this component. I wanted to make sure the accordion was accessible so instead of rebuilding my own accordion I used a Svelte component library called shadcn-svelte. This is a Svelte implementation of the popular shadcn ui component library for React.

I believe this challenge is a bit harder than a Newbie challenge if you were to consider accessibility. Especially if you intended developers to implement this from scratch without relying on an external library.

Nonetheless, I learned a lot from completing this challenge.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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