HTML5 details element

Have you ever wondered if you could achieve that jQuery Accordion widget effect without jQuery or JavaScript? Did you think it will be ever possible to create it with just HTML? If no, well, you can achieve that with the HTML5 <details> element.

The details element is used as a widget to show/hide additional information.

    
Click me to toggle more information
    

The details element is used as a widget to show/hide additional information.

Demo: http://jsfiddle.net/8mthoj5g/

Attributes:

It comes with one additional attribute that is 'open'. By default it appears in closed state, but if you want to keep the hidden information visible on-load, you can use the 'open' attribute -

    
Click me to toggle more information
    

The details element is used as a widget to show/hide additional information.

Demo: http://jsfiddle.net/8mthoj5g/1/

Nesting:

Nesting multiple details in details is possible -

    
Click me to toggle more information
    

The details element is used as a widget to show/hide additional information.

        
More links to help
        

Home

Articles

Updates
       

Demo: http://jsfiddle.net/8mthoj5g/2/

Styling:

This is the area where you can make the widget look beautiful with CSS. If you want to style the marker you can use ::-webkit-details-marker pseudo class  -

details{
    border: 1px solid #666; 
    border-radius: 4px; 
    margin: 0 0 4px 0;
}
summary{ 
    background: linear-gradient(to top, #f1efef 0%, #e8e9e9 50%, #e8e8e8 100%); 
    padding: 8px; 
    outline: none; 
}
.more-info{ 
    border-top: 1px solid #666; 
    padding: 8px; 
}
details[open] summary{ 
    background: none; 
}
summary::-webkit-details-marker {
  color: #818b94;
}

Demo: http://jsfiddle.net/czs29fd3/

To replace the default marker with some fancy icon, you can use the CSS :before and :after pseudo classes with summery element, but before using a replacement for marker you must hide it first -

summary::-webkit-details-marker {
  display: none; /*Hide the default marker*/
}
summary:after {  
  content: "+";   
  float: left; 
  font-size: 1em; 
  font-weight: bold;       
  width: 22px;
}
details[open] summary:after {
  content: "-";
}

What about the browsers that don't support details element?
Use this Bulletproof HTML5 <details> fallback using jQuery by @MathiasBynens

Browser Support:

You can see the latest browser support at caniuse.com