FAQ Accordion

Accordion layout has all answers hidden and shows the answer when you click on the question. It makes the widget compact and clear, while you can create long detailed answers and avoid messy page made with HTML, CSS/Sass, JavaScript.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Useful resources
• Front End Style
• Colors
• Typography

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

Links

• Solution URL: Solution URL here
• Live Site URL: Solution URL here

My process

Built with

• Semantic HTML5 markup
• CSS, Sass
• Flexbox
• Desktop First Workflow
• HTML DOM Document querySelector and querySelectorAll()
• JavaScript Array forEach()
• JavaScript if Statement
• HTML DOM Element classList.remove and classList.toggle

Useful resources

• FAQ Accordion Tutorial by Coding Addict
• Javascript Tutorial and Projects Course by John Smilga

Front-end Style Guide

Layout

The designs were created to the following widths:

• Mobile: 375px
• Desktop: 1440px

Colors

Primary

Text

• Very dark desaturated blue: hsl(238, 29%, 16%)
• Soft red: hsl(14, 88%, 65%)

Gradient

Background gradient:

• Soft violet: hsl(273, 75%, 66%)
• Soft blue: hsl(240, 73%, 65%)

Neutral

Text

• Very dark grayish blue: hsl(237, 12%, 33%)
• Dark grayish blue: hsl(240, 6%, 50%)

Dividers

• Light grayish blue: hsl(240, 5%, 91%)

Typography

Body

• Font size: 12px

Font

• Family: Kumbh Sans
• Weights: 400, 700