Accordion Using HTML 5

Introduction

Recently, I used a useful widget in my web application which is called Accordion. In the older version of HTML, to implement Accordion, we needed to implement a lot of stuff like HTML, CSS and JavaScript code too for allowing the toggle effect.

But HTML 5 has this tag which can work similarly but in an effective way. In this tutorial, we are going to see the difference between both the old and the new accordion widget.

HTML 5 Accordion

To use HTML 5 Accordion, there is a new HTML tag, <details>, and it is used to add the accordion into our HTML page.

<details>
...
</details>

And to display the label along with the accordion, we are going to use the <summary> tag which is used to display a caption or a description.

<summary>
This is simple summary
</summary>

Accordion using an older approach

If you have used an older approach to develop the accordion, then you must be aware of the excessive time it takes. Also, you must know that we need to apply an additional JavaScript code so that we can get the toggle effect. You can find the example below.

<html>
<head>
<title>Manav - HTML Old Accordian Demo</title>
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>
<h2>HTML Old Accordian</h2>
<button class="accordion">Section 1</button>
<div class="panel">
<p>This is section 1</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>This is section 2</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>This is section 3</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>

Here, in this example, I have used JavaScript code which allows us to toggle the Div section but using HTML 5 <details> widget, we don't need to implement such things. You can see the output like this.

New approach

We are going to learn the newly added HTML 5 tag <details> with a simple example where we are not going to use JavaScript to enable the toggle effect.

<html>
<head>
<title>Manav - HTML 5 Accordian Demo</title>
<style>
details {
background: #eee;
color: #444;
padding: 18px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
</style>
</head>
<body>
<h1>HTML 5 Acordian Tag</h1>
<details>
<summary>Section 1</summary>
<h3>This is section 1</h3>
</details>
<details>
<summary>Section 2</summary>
<h3>This is section 2</h3>
</details>
<details>
<summary>Section 3</summary>
<h3>This is section 3</h3>
</details>
</body>
</html>

As you can see in the above example, I have just used different HTML 5 tags. We get the same result as compared to the older approach.

Conclusion

This is how we can take advantage of HTML 5 tags to simplify the different functionalities. Keep in mind that it's just an approach to use the accordion-type of effect. Still, you can implement customized accordion as per your requirements.

Thanks!

2 Comments

Join the conversation! Your thoughts help the community grow.

Rafiki Cai6y ago
Greetings. Thanks, Manav, for this tutorial. I'm trying to embed this accordion; but am stumped on how to control the width and height of it. (See example here: test.votehisassout.org)
Rushi Mehta7y ago
Nice Explained Article