How To Create an Accordion – No Javascript

Accordion using only html and css
Accordion using only html and css

An accordion is one of the frequently used sections on websites. We mostly use it to create FAQ pages. Usually, we use Javascript to create a functional accordion but do you know HTML comes with tags that we can use as accordion? There is no need for javascript.

Have you heard of details and summary tags in HTML.? Html comes with many different semantic tags to use in different parts of our website but most of the time we just use div and it gets our job done. You can use the details and summary tags to create your accordion and a few lines of CSS to style it.

<details>
  <summary>
    This is accordion title
  </summary>
  This is accordion body
</details>

As you can see it’s very minimal. The details tag is your whole accordion container. And the summary tag is used for the title and it’s only shown by default, anything else you put inside will be hidden. Once you click on the summary tag rest of the content will visible.

<details class="accordion">
  <summary class='accordion-header'>
    How does it work.?
  </summary>
  <div class="accordion-body">
    This is accordion body
  </div>
</details>

If you want to make it a little better to read and add style to different tags you can add class to each section.

.accordion{
  margin-bottom:5px;
}
.accordion-header{
  background-color:gray;
  padding:10px 10px;
  color:white;
  cursor:pointer;
}
.accordion-body{
  padding:5px;
}

This is the style I applied in the top image. I’ll leave the style part to you.

You can also see a working demo on my codepen.

See the Pen Accordion by Dipankar Maikap (@dipankarmaikap) on CodePen.

Thank you for reading this post. Stay safe and keep your surroundings clean. 🙂

Dipankar Maikap

Dipankar Maikap

I'm a freelance web developer. I work out of Kolkata, India. My favorite number is 77.

Leave a Reply

Your email address will not be published. Required fields are marked *