This is a solution to the FAQ accordion card challenge on Frontend Mentor.
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
- Bonus: Complete the challenge without using JavaScript
- Solution URL: https://www.frontendmentor.io/solutions/faq-accordion-card-in-pure-html-and-scss-9OePi0oj-
- Live Site URL: https://kens-visuals.github.io/faq-accordion-card/
- Semantic HTML5 markup
- Pure HTML functionality:
<details></details>
- CSS Flexbox
- Pure CSS animations
- SCSS variables
- Mobile-first workflow
<!-- Adding dropdown functionality in pure HTML -->
<details class="card__detail">
<summary class="card__detail-summary">
How many team members can I invite?
<img
src="./images/icon-arrow-down.svg"
alt="orange arrow"
class="card__detail-summary--img"
/>
</summary>
<p class="card__detail-text">
You can invite up to 2 additional users on the Free plan. There is no limit
on team members for the Premium plan.
</p>
</details>
/* Animationg the same dropdown with some simple transitions */
.card__detail {
&:not([open]) {
height: 3.5em;
}
&[open] {
color: $color-primary;
height: 7em;
transition: all 0.5s ease-out;
& .card__detail-summary {
font-weight: 700;
}
& .card__detail-summary--img {
transform: rotate(180deg);
}
}
}
- MDN: HTML
<details></details>
- This helped me to fully understand how HTML details work, also further helped for styling them. - CSS-Ticks:
<details></details>
animations - Some other methods that I found on CSS-ticks on how to animate details.
- Frontend Mentor - @kens-visuals
- Codewars - @kens_visuals
- CodePen - @kens-visuals