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.
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
- Solution URL: https://www.frontendmentor.io/solutions/mobilefirst-faq-accordion-card-with-sass-fEUro54g2
- Live Site URL: https://dentednerd.github.io/fm-accordion-sass/
- Semantic HTML5 markup
- Sass
- Flexbox
- Mobile-first workflow
Kept the Javascript minimal:
function onClick() {
var thisItem = event.target.parentNode;
thisItem.classList.toggle("open");
};
Used CSS variables:
:root {
--text-primary-blue: hsl(238, 29%, 16%);
--text-primary-red: hsl(14, 88%, 65%);
--text-neutral-vdark: hsl(237, 12%, 33%);
--text-neutral-dark: hsl(240, 6%, 50%);
--bg-violet: hsl(273, 75%, 66%);
--bg-blue: hsl(240, 73%, 65%);
--divider-blue: hsl(240, 5%, 91%);
}
Each answer animates into view:
.answer {
height: 0;
transform: scaleY(0);
transform-origin: center top;
}
&.open {
.answer {
height: auto;
transform: scaleY(1);
transform-origin: center top;
transition: transform 0.2s ease-in-out;
}
}
The arrow on each item flips:
button.question {
&::after {
content: '';
background-image: url('../images/icon-arrow-down.svg');
transform: scaleY(1);
transition: transform 0.2s ease-in-out;
}
}
&.open {
button.question {
&::after {
transform: scaleY(-1);
transition: transform 0.2s ease-in-out;
}
}
}
Made use of the Live Server and Live Sass Compiler extensions for VSCode in development.
I'd like to rebuild this in React, with styled-components.
- Website - Joey Imlay
- Frontend Mentor - @dentednerd
- Twitter - @dentednerd
I was inspired to pick this up by Coder Coder.