<details> for expandable section

The details element marks a section that the user can expand to get further details. The details element usually contains a summary element.

The summary element creates a label or title for the details section.

 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
details {border: solid thin black; padding: 5px}
details > summary { font-weight: bold} 
</style> 
</head> 
<body> 
    <details> 
        <summary>Title</summary> 
        Details Details Details Details Details Details Details 
        Details Details Details Details Details Details Details 
        <ol> 
            <li>A</li> 
            <li>B</li> 
            <li>C</li> 
        </ol> 
</details> 
</body> 
</html>
Click to view this demo.

Example of the details Element

 
<details open> 
           <summary>Tom Leadbetter</summary> 
           <figure> 
             <img alt="" src="http://java2s.com/Book/HTML-CSSImages/star.png" /> 
             <figcaption>Star</figcaption> 
           </figure> 
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
         ac turpis egestas.</p> 
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
         ac turpis egestas.</p> 
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
         ac turpis egestas.</p> 
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
         ac turpis egestas.</p> 
         </details> 

         <details> 
           <summary>Summary</summary> 
           <figure> 
             <img alt="" src="http://java2s.com/Book/HTML-CSSImages/star.png" /> 
             <figcaption>Summary</figcaption> 
           </figure> 
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
         ac turpis egestas.</p> 
         </details>

Creating a Collapsible Table of Contents

 
<article> 
           <h1>A massive document with lots of juicy content</h1> 
           <details> 
             <summary>Table of contents<summary> 
             <nav> 
                <ul> 
                  <li><a href=#chapter1>Chapter 1</a></li> 
                  <li><a href=#chapter2>Chapter 2</a></li> 
                </ul> 
             </nav> 
           </details> 
           <section> 
    <h1 id="chapter1">Chapter 1</h1> 
  </section> 
  <section> 
    <h1 id="chapter2">Chapter 2</h1> 
  </section> 

</article>
Click to view this demo.
Home 
  HTML CSS Book 
    HTML  

Related: