HTML & CSS Only FAQ Accordion

Preview:

Description:

A simple and smooth FAQ accordion component created using CSS and HTML <details> <summary> elements.

How to use it:

1. Add accordion headings (questions) to <summary> elements and wrap them together with your accordion content (answers) into <details> elements. The open attribute is used to determine if the selected accordion panel should open on page load.

<details open>
  <summary>FAQ 1</summary>
  <div class="faq__content">
    <p>Answer 1</p>
  </div>
</details>
<details>
  <summary>FAQ 2</summary>
  <div class="faq__content">
    <p>Answer 2</p>
  </div>
</details>
<details>
  <summary>FAQ 3</summary>
  <div class="faq__content">
    <p>Answer 3</p>
  </div>
</details>
...

2. The primary styles for the FAQ accordion.

summary {
  font-size: 1.25rem;
  font-weight: 600;
  background-color: #fff;
  color: #333;
  padding: 1rem;
  margin-bottom: 1rem;
  outline: none;
  border-radius: 0.25rem;
  text-align: left;
  cursor: pointer;
  position: relative;
}
details > summary::after {
  position: absolute;
  content: "+";
  right: 20px;
}
details[open] > summary::after {
  position: absolute;
  content: "-";
  right: 20px;
}
details > summary::-webkit-details-marker {
  display: none;
}

3. Apply a smooth open animation to the accordion.

details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0; margin-top: -10px}
  100%  {opacity: 1; margin-top: 0px}
}