Post
Ask Question

Accordion Using HTML 5

which is used to create the accordion and it's pretty easy compared to the older version of HTML where we need to implement the toggle effect using JavaScript.

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.
  1. <details>    
  2.      ...    
  3. </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.
  1. <summary>    
  2.       This is simple summary    
  3. </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.
  1. <html>    
  2.     <head>    
  3.         <title>Manav - HTML Old Accordian Demo</title>    
  4.         <style>      
  5.         .accordion {      
  6.             background-color: #eee;      
  7.             color: #444;      
  8.             cursor: pointer;      
  9.             padding: 18px;      
  10.             width: 100%;      
  11.             border: none;      
  12.             text-align: left;      
  13.             outline: none;      
  14.             font-size: 15px;      
  15.             transition: 0.4s;      
  16.         }      
  17.         .active,      
  18.         .accordion:hover {      
  19.             background-color: #ccc;      
  20.         }      
  21.         .panel {      
  22.             padding: 0 18px;      
  23.             display: none;      
  24.             background-color: white;      
  25.             overflow: hidden;      
  26.         }      
  27.     </style>    
  28.     </head>    
  29.     <body>    
  30.         <h2>HTML Old Accordian</h2>    
  31.         <button class="accordion">Section 1</button>    
  32.         <div class="panel">    
  33.             <p>This is section 1</p>    
  34.         </div>    
  35.         <button class="accordion">Section 2</button>    
  36.         <div class="panel">    
  37.             <p>This is section 2</p>    
  38.         </div>    
  39.         <button class="accordion">Section 3</button>    
  40.         <div class="panel">    
  41.             <p>This is section 3</p>    
  42.         </div>    
  43.         <script>      
  44.         var acc = document.getElementsByClassName("accordion");      
  45.         var i;      
  46.         for (i = 0; i < acc.length; i++) {      
  47.             acc[i].addEventListener("click", function () {      
  48.                 this.classList.toggle("active");      
  49.                 var panel = this.nextElementSibling;      
  50.                 if (panel.style.display === "block") {      
  51.                     panel.style.display = "none";      
  52.                 } else {      
  53.                     panel.style.display = "block";      
  54.                 }      
  55.             });      
  56.         }          
  57.         </script>    
  58.     </body>    
  59. </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.
  1. <html>  
  2.     <head>  
  3.         <title>Manav - HTML 5 Accordian Demo</title>  
  4.         <style>    
  5.         details {    
  6.             background: #eee;    
  7.             color: #444;    
  8.             padding: 18px;    
  9.             border: none;    
  10.             text-align: left;    
  11.             outline: none;    
  12.             font-size: 15px;    
  13.         }    
  14.     </style>  
  15.     </head>  
  16.     <body>  
  17.         <h1>HTML 5 Acordian Tag</h1>  
  18.         <details>  
  19.             <summary>Section 1</summary>  
  20.             <h3>This is section 1</h3>  
  21.         </details>  
  22.         <details>  
  23.             <summary>Section 2</summary>  
  24.             <h3>This is section 2</h3>  
  25.         </details>  
  26.         <details>  
  27.             <summary>Section 3</summary>  
  28.             <h3>This is section 3</h3>  
  29.         </details>  
  30.     </body>  
  31. </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!
Next Recommended Reading How To Export HTML Table To Excel Using jQuery Plugin