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.

• Frontend Mentor - FAQ accordion card solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

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: Frontendmentor.io
• Live Site URL: fsuropaty.github.io

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow

I learned about:

• Make Accordion Menu only using HTML & CSS
• Adding icon from CSS
• Animation stuffs
• Changing elements style depends on the state
• Positioning object in CSS

<!-- Accordion Menu -->
<div class="question">
  <input type="checkbox" id="question1" name="checkbox" />
  <label for="question1">How many team members can I invite?</label>
  <p class="answer">
    You can invite up to 2 additional users on the Free plan. There is no limit
    on team members for the Premium plan.
  </p>
</div>

/* Adding icon to the end of the question tab */
label::after {
  content: url("./images/icon-arrow-down.svg");
  transition: ease-in 300ms;
}

/* Change elements style depends on the input state */
input:checked + label {
  font-weight: bold;
  font-size: 0.875rem;
}

input:checked ~ .answer {
  max-height: 100vh;
  visibility: visible;
  margin-top: 1em;
  padding-right: 1.5rem;
}

input:checked + label::after {
  transform: rotate(-180deg);
}

I wonder if i can make the same styling works with this elements

<details>
  <summary></summary>
</details>

• W3Schools - Pretty much your guidebook in website development
• MDN - W3Schools but from Mozilla.
• Codepen.io - For some codes

• Website - fsuropaty
• Frontend Mentor - @fsuropaty

Thanks to Raúl Barrera on Codepen.io for the pure css accordion menu pen