Back

FAQ Accordion

A accessible accordion component that shows frequently asked questions, with a toggle button that changes the state of the accordion, made with no JS footprint. A challenge by Frontend Mentor.

---

Links

• Website
• Source

Media

Desktop

Mobile

The challenge

Users should be able to:

• Hide/Show the answer to a question when the question is clicked
• Navigate the questions and hide/show answers using keyboard navigation alone
• View the optimal layout for the interface depending on their device’s screen size
• See hover and focus states for all interactive elements on the page

My process

Built with

• Semantic HTML5 markup
• Astro
• Tailwind CSS
• Fluid Tailwind

Continued development

I expected the next project coming from Interactive Rating Component to be a bit more JS-involved so I can try more of Solid.js, turns out this project is completely JS-free. I’m very happy with the result as Frontend Mentor also challenged to make this project without any JavaScript.

Author

• Website - frilly.dev
• Frontend Mentor - @hikawi