Accordions

Very simple and easy to use accordions, you can have it by :focus or with Javascript.

Details and Summary

You can use details and summary to create a fast accordion in order to add information, frequently questions and more. Here it is an example how it works.

Question #1?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores deleniti dicta iste optio quibusdam quis voluptate. Dolorem doloribus eaque eveniet, facere impedit ipsam laborum quae quam quasi qui voluptate!

Question #2?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid autem dolorum fugit illo impedit ipsam nihil nisi qui quos. quos. quos. Distinctio, illo, quaerat. Consequuntur ex temporibus vitae. Aliquid facilis qui totam.s

<details class="question">
  <summary>
    ...
    <icon/>
  </summary>
  <div class="summary">
    <p>...</p>
  </div>
</details>

By focus

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et soluta, eveniet dignissimos dolore impedit aliquid voluptatem sapiente explicabo quisquam reprehenderit perspiciatis beatae! Eaque animi veritatis enim nostrum natus quos ipsum.

Note: Focus is not supported by Safari (for tag button and anchor) and sometimes with Firefox, maybe this can cause a little problem to open any accordion by focus. For more info here click here.

<div class="accordion focused">
  <button class="accordion-head">
    <h5>...</h5>
    <span class="open">icon</span>
  </button>
  <div class="accordion-content">
    <p>...</p>
  </div>
</div>

<a href="#!" tabindex="0" class="accordion-head">
  For Safari this code...
</a>

With Javascript

Question 1?

Question 2?

Question 3?

Question 4?

HTML
<div class="accordion by-js">
  <div class="accordion-head">
    <h5>...</h5>
    <span class="open">icon</span>
  </div>
  <div class="accordion-content">
    <p>...</p>
  </div>
</div>

Javascript
// This is the Javascript code to open/close the accordion based in js.
const accordions = document.querySelectorAll(".by-js");
for (let index = 0; index < accordions.length; index++) {
  const accordion = accordions[index];
  accordion.firstChild.addEventListener("click", () => {
    accordion.childNodes[0].lastChild.classList.toggle("rotate");
    accordion.childNodes[1].classList.toggle("is-active");
  });
}

Simple accordions

Accordions without backgrounds, simple and a little background when it is opened.

<div class="accordions simple-accordions">
  ...
  Just add the class 'simple-accordions' as a wrap of the accordions.
  ...
</div>

Light accordions

Accordions without backgrounds, but when they are opened they have a light background and little rounded corners.

<div class="accordions light-accordions">
  ...
  Just add the class 'light-accordions' as a wrap of the accordions.
  ...
</div>

Rounded accordions

Accordions with rounded corners and with a little separation between them.

<div class="accordions rounded-accordions">
  ...
  Just add the class 'rounded-accordions' as a wrap of the accordions.
  ...
</div>

Accordions

Details and Summary

By focus

Question 1?

Question 2?

Question 3?

Question 4?

With Javascript

Question 1?

Question 2?

Question 3?

Question 4?

Simple accordions

This is the first question?

This is the second question?

This is the third question?

This is the fourth question?

Light accordions

This is the first question?

This is the second question?

This is the third question?

This is the fourth question?

Rounded accordions

This is the first question?

This is the second question?

This is the third question?

This is the fourth question?

Accordions

Details and Summary​

By focus​

Question 1?

Question 2?

Question 3?

Question 4?

With Javascript​

Question 1?

Question 2?

Question 3?

Question 4?

Simple accordions​

This is the first question?

This is the second question?

This is the third question?

This is the fourth question?

Light accordions​

This is the first question?

This is the second question?

This is the third question?

This is the fourth question?

Rounded accordions​

This is the first question?

This is the second question?

This is the third question?

This is the fourth question?

Details and Summary

By focus

With Javascript

Simple accordions

Light accordions

Rounded accordions