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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first
I started this excercise several months ago and somehow never could finish it, due to lack of time. Back then I also hadn't learned about positioning yet and had no idea how to accomplish the positioning of the images.
At first I had used <button>
to activate the Questions in the accordeon. In the meantime I did came across many articles discussing 'When to use the button-tag'. In order to keep it semantically correct. Too bad I didn't keep track of the solutions in GitHub yet.
- How to build an Accordion Menu using HTML, CSS and JavaScript - This helped me figure out how to the accordeon with JavaScript.
- Website - www.katriens.be
- Frontend Mentor - @graficdoctor
- Twitter - @graficdoctor