How to create an Accordion in HTML 5  

In HTML, Accordions are used to organizes content in collapsable form. They are useful when you want to show toggling effect. <details> HTML tag is used to create Accordion in HTML 5.

0 538 Technology | Html
Wed Dec 26 , 2018

To create Accordion in HTML 5, <details> HTML tag is used. This tag is used to add the accordion in our HTML page. <summary>tag is used to display the label along with the accordion.


Syntax

    <details>  
         <summary> 
               summary  
         </summary> 
    </details>  

Example


<html>        
 <head>  
 <title>Accordian Demo in HTML 5</title>  
 <style>  
 details {  
                background: orange;  
                color:blue;  
                padding: 18px;  
                border: none;  
                text-align: left;  
                outline: none;  
                font-size: 15px;  
            }  
 </style>  
 </head>  
 <body>  
  <h1>HTML 5 Accordian Tag</h1>  
   <details>  
   <summary><p> tag</summary>  
  <p>
    Tag <code><p></code> denotes a paragraph. We can have multiple paragraphs in a html page. <code><p></code> tag has start tag as well as end  tag. Browsers automatically add some white space (a margin) before and after a paragraph.
</p> 
</details>  
  <details>  
  <summary><h1> to <h6> tags</summary>  
  <p>
<code><h1> to <h6></code> tags defines HTML headings. <code><h1></code> tag defines  the most important, bigger and large heading. <code><h6></code> tag defines the least important and smaller heading.
Headings are used to show the structure of the document. <code><h1></code> tag is used for main heading, followed by <code><h2></code> tag, then the less important <code><h3></code>, and so on till <code><h6></code>.
</p>  
</details>       
<details>  
 <summary><br> tag</summary>  
  <p>
<code><br></code> tag denotes a line break. Use <code><br></code> tag  if you want a line break (a new line) without starting a new paragraph. <br> tag is an <code>empty</code> tag, which means that it has <code>no end tag</code>.
</p> 
 </details>  
 </body>      
</html>  


Output

HTML 5 Accordian Tag

<p> tag

Tag <p> denotes a paragraph. We can have multiple paragraphs in a html page. <p> tag has start tag as well as end tag. Browsers automatically add some white space (a margin) before and after a paragraph.

<h1> to <h6> tags

<h1> to <h6> tags defines HTML headings. <h1> tag defines the most important, bigger and large heading. <h6> tag defines the least important and smaller heading. Headings are used to show the structure of the document. <h1> tag is used for main heading, followed by <h2> tag, then the less important <h3>, and so on till <h6>.

<br> tag

<br> tag denotes a line break. Use <br> tag if you want a line break (a new line) without starting a new paragraph. <br> tag is an empty tag, which means that it has no end tag.



Subscribe & Get Regular Updates On Your E-mail