Create beautiful FAQ Accordion with HTML and CSS only

Category: accordion CSS & CSS3 | September 20, 2021
Author: mostafizur14
Official Page: Go to website
Last Update: September 20, 2021
License: MIT

Description:

You must be looking to create a FAQ Accordion with HTML and CSS only. Creating the same with HTML and CSS can be fast in terms of website page speed and of-course, will take less time to make accordion with CSS and HTML.

In this blog post, you will get to know, how you can create accordion using pure CSS and HTML <details> and <summary> elements.

How can I make it?

  1. Create HTML structure like following and place your questions in <summary> elements and your answer within <p> element of <div>. You can make as many accordion as you want, you will just need to replicate <details>.
<main>
  <details open>
    <summary>Question 1</summary>
    <div class="faq__content">
      <p>Answer 1</p>
    </div>
  </details>

    <details>
    <summary>Question 2</summary>
    <div class="faq__content">
      <p>Answer 2</p>
    </div>
  </details>
   </main>

2. Add the CSS style to your FAQ Accordion. And, you are done.

main {
  max-width: 520px;
  margin: 0 auto;
}
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[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0; margin-top: -10px}
  100%  {opacity: 1; margin-top: 0px}
}
details > summary::after {
  position: absolute;
  content: "+";
  right: 20px;
}
details[open] > summary::after {
  position: absolute;
  content: "-";
  right: 20px;
}
details > summary::-webkit-details-marker {
  display: none;
}