Frontend Mentor - FAQ Accordion Card Solution

This is a solution to the FAQ accordion card challenge on Frontend Mentor.

Table of contents

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

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
• Bonus: Complete the challenge without using JavaScript

Screenshot

Links

• 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/

My process

Built with

• Semantic HTML5 markup
• Pure HTML functionality: <details></details>
• CSS Flexbox
• Pure CSS animations
• SCSS variables
• Mobile-first workflow

What I learned

<!-- 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);
    }
  }
}

Useful resources

• 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.

Author

• Frontend Mentor - @kens-visuals
• Codewars - @kens_visuals
• CodePen - @kens-visuals