This is a solution to the FAQ accordion card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- See hover states for all interactive elements on the page
- Hide/Show the answer to a question when the question is clicked
- HTML5
- CSS
- Flexbox
- Mobile-first workflow
This challenge was a bit more difficult compared to the earlier challenges. I had trouble figuring out how to implement the desktop images with the bg-pattern and did not realize I could do this with the help of background-image, background-position etc.
(seems like I'm not thinking about the css background property and defaulting to using img
element). In addition, I had an issue dealing with the parent height jumping as the child element (accordion) expands and collapses. For now, I used a fixed height on the parent but am curious how this issue can be achieved or fixed.
Tried to make sure the accordion complies with ADA Web Accessibility and is toggleable with a keyboard etc.
I would like to focus on finding best or optimized practice in figuring out the height jump issue. In addition, I would like to add a bit of smoother transition effect when the accordion sections expands, collapses.