Submitted 8 months ago
FAQ accordion component using CSS Flex and Javascript
@Antonvasilache
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
- Completed the first challenge that includes JavaScript.
- Implemented both clicking and keyboard functionality.
- Faster completion of the static webpage part.
- Should have used state variables.
- Creating the accordion with only one item open at a time - had to make use of extensive class manipulation to achieve the desired effect.
- Adding keyboard navigation on top of the clicking functionality proved difficult due to the default behaviour of some events. Pressing Enter would focus the next item, so I managed to stop it using
e.stopPropagation() - Adding dividers as div elements between the accordion items broke the keyboard navigation - had to remove them and add padding and
border-bottominstead
- There is probably a more efficient way of managing state for the opened/closed items.
- Refactoring the code to something less repetitive.
- Sizing the page elements with less reliance on media queries.
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