FAQ accordion
In this challenge, you'll build an FAQ accordion. This is an extremely common front-end pattern, so it's an excellent opportunity to get some practice in!
📝 Brief
Your challenge is to build out this FAQ accordion and get it looking as close to the design as possible. You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your 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
💡 Ideas to test yourself
1. Research patterns for building an accessible accordion and try your hardest to make the accordion accessible
2. Complete the challenge without using JavaScript
Solution retrospective
What are you most proud of, and what would you do differently next time?
I'm proud of how I built the FAQ Accordion using only HTML, CSS (Flexbox), and JavaScript, keeping the code clean and simple. I also focused on making the design fully responsive without relying on frameworks.
What challenges did you encounter, and how did you overcome them?
Tne challenge I faced was making sure that when a user clicks on a question, the previously opened answer closes automatically. Initially, all answers remained open when clicked, which affected the user experience. To solve this, I used JavaScript to track the currently active question. I added an event listener to each question and closed any previously opened answers before opening the new one. This way, only one answer stays open at a time, creating a cleaner and more user-friendly interaction.
What specific areas of your project would you like help with?
I would love feedback on the overall responsiveness and whether the FAQ accordion feels smooth and intuitive.