Frontend Mentor - FAQ accordion card solution

Table of contents

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

Overview

The challenge

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

Mobile

Desktop

Links

• Solution URL: https://github.com/JunoField/fm5-faq-accordion-card/
• Live Site URL: https://junofield.github.io/fm5-faq-accordion-card/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• JavaScript and HTML DOM
• Mobile-first workflow
• SASS - CSS extension framework
• Parcel - Provides testing server, build tools, etc.

Continued development

The transition animation on the accordion looks a little weird - I will look at improving this in the future.

Also the overflow for the main graphic on the desktop site needs to be hidden without hiding it for the package icon - I tried several ways to do this and none worked, but I will look into other methods if they exist.

Useful resources

• How to Create an Accordion - this helped with the FAQ accordion layout.
• How To Create An FAQ Accordion Menu Using Only HTML & CSS - This helped with the arrows at the right of the FAQ question elements. The tutorial also included an accordion setup without JS, which I will consider doing in future to improve performance.

Author

• GitHub - JunoField
• Frontend Mentor - @JunoField