Accordions with HTML5 tags

Simple Accordions with HTML5 tags:

In this article i explained Accordions with clear example using HTML5 tags and CSS Properties. This is the basic Accordion example,it is easy to understand


HTML File:
   <div id="container">
            <details class="box">
                <summary class="title">
                    Heading One
                </summary>
                <p>
                    content here.......
                </p>
            </details>
             <details class="box">
                <summary class="title">
                    Heading Two
                </summary>
                <p>
                    content here.......
                </p>
            </details>
             <details class="box">
                <summary class="title">
                    Heading Three
                </summary>
                <p>
                    content here.......
                </p>
            </details>
        </div>

 This CSS Properties is useful for background color,width,height,border. we can develop basic  accordions without this below CSS properties.

CSS Properties :

#container{ 
 width: 500px;
 height: auto;
 background: #F2F2F2; 
border: 1px solid #999;
 }
 .box{
 width: 500px;
 height: auto;
 background: #ccc; 
border: 1px solid #999;
 }
 .title{
 height: 30px;
 background: #999; 
cursor: pointer; 
 }