Frontend Mentor - FAQ accordion card solution

This is a solution to the FAQ accordion card challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

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

Screenshot

Original Mobile Design	My Mobile Design

Original desktop design

My desktop design

Links

• Solution URL
• Repository URL
• Live Site URL

My process

• 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.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• CSS transitions

What I learned

• 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 added margin-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.

Useful resources

• 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

Author

• Website - Richard Cyrus
• Frontend Mentor - @richardcyrus

Acknowledgments

@LadyMarian - Her markup for the images provided the inspiration for my implementation.