This is a solution to the FAQ accordion card challenge on Frontend Mentor.
To build out a FAQ accordion card and get it looking as close to the design as possible.
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
Original Mobile Design | My Mobile Design |
---|---|
- Start with styling the page for those cases where there is no JavaScript.
- Build the mobile view first.
- Build the desktop view second.
- Add JavaScript to enable the accordion functionality.
- Test and style the Accordion.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- CSS transitions
- Accessible markup for an accordion component.
- Positioning the mobile image was a a bit of a challenge. The supplied asset has an extra 30 pixel on the left which made it hard to match the design. To fix the problem, I wrapped the image in a flex container set to
justify-content: center;
and addedmargin-left: -30px;
to the image. - The JavaScript used to enable the accordion functionality is based on the script from Scott O'Hara, with the original located here.
- How do you mark up an accordion?
- The details and summary elements
- Accordion
- Accessible ARIA Accordions
- Accessible accordions & disclosure widgets
- Collapsible Section
- Accordion WAI-ARIA Authoring Practices
- A Modern CSS Reset
- Website - Richard Cyrus
- Frontend Mentor - @richardcyrus
@LadyMarian - Her markup for the images provided the inspiration for my implementation.