rohan843 / faq-accordion

Frontend Mentor - FAQ accordion solution

This is a solution to the FAQ accordion challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - FAQ accordion solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • Useful resources
  • Author

Overview

The challenge

Users should be able to:

• Hide/Show the answer to a question when the question is clicked
• Navigate the questions and hide/show answers using keyboard navigation alone
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: Frontend Mentor
• Live Site URL: FAQ accordion | Frontend Mentor

My process

Built with

• Semantic HTML5 markup
• CSS custom properties

Useful resources

• This SO answer to animate height of an element - The use of max-height property instead of height property in the animation was very insightful, as the user can essentially "ask" the browser to first use no height, and then as much height as required. The only issue in using max-height was that the duration of actually visible animation became difficult to ascertain. Currently, I worked around this by choosing a duration value that seems to be too small for being noticeable.

Author

• Website - Rohan Sharma
• Frontend Mentor - @rohan843