How to create an Accordion with pure HTML, CSS no JavaScript

Okereke Clement Kalu — Sun, 26 Feb 2023 23:54:17 +0000

Introduction

Have you ever wondered if you can create an accordion without writing very long codes?

With HTML5 and a little bit of CSS you can achieve this

The `<details>` tag

The <details> tag is used to define extra information that a user can open and close on demand. By default it is closed and when open, it expands the contents.

The <summary> is usually used alongside the <details> element to define a heading for the content.

Let us see how this works

<body>
<details>
  <summary>Accordion</summary> 
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</details>
</body>

This is the basic structure but we can decide to add some additional style for example:

body{
  background-color: lightblue;
}

details {
  background-color: white;
  padding-block: 10px;
  padding-inline: 10px;
  border-radius: 5px;
  width: 50%;
  margin-inline: auto;
}
summary {
  text-transform: capitalize;
}
p{
  color: gray;
}

The output should look some thing like

Conclusion

Creating accordions with JavaScript makes your work neater, smaller in size and easier to read and understand .

DEV Community: Okereke Clement Kalu

How to create an Accordion with pure HTML, CSS no JavaScript

Introduction

The <details> tag

Conclusion

The `<details>` tag