Frontend Mentor - FAQ accordion card solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development
• Author

Overview

• This solution uses Javascript to toggle the answers.
• This is an updated version of the solution which uses javascript to toggle answers.
• To view the older version which uses javascript FAQ Accordion With JS

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

Screenshots

Desktop version

Mobile version

Links

• Solution URL: Code on GitHub
• Live Site URL: GitHub Pages Live URL

My process

Worked on displaying background as given in the design. Then implemented the card and accordion styling with css. Added hover states for elements. Implemented show/hide answer to a question using css.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

Continued development

Will do more of these challenges to improve my skills.

Author

• Website - Shiva Santosh Jana
• Frontend Mentor - @santu369
• Twitter - @santu69