Responsive FAQ Accordion Dropdown In HTML and CSS

How to create responsive accordion Expandable and Collapsible Frequently Asked Questions Elements. Accordion HTML, is an easy and seamless accordion FAQ component built with CSS and HTML elements.

Must Read: Responsive Pure CSS Only Accordion & Tabs Component

How to make use of it:

1. Add accordion headings to <summary> parts and wrap them collectively along with your accordion content into <details>.

<details open>
  <summary>How I solve this issue?</summary>
  <div class="faq__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor suscipit, iure tenetur eveniet, vero tempore delectus? Perferendis, quisquam ullam consequuntur?</p>
  </div>
</details>
<details>
  <summary>How to input your data on this board?</summary>
  <div class="faq__content">
    <p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
  </div>
</details>
...

2. The main types 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 an easy-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}
}

Read More –

Query Plugin That Combines Accordion Slider Functionality
A Lightweight Accessible Accordion Using Vanilla JS


See Demo And Download

Official Website(mostafizur14): Click Here

This superior jQuery/javascript plugin is developed by mostafizur14. For extra Advanced Usage, please go to the official website.

Share