Create a Details Section with details element
Description
The details element creates a section
that the user can expand to get further details about a topic.
The details element usually contains a summary element,
which creates a label or title for the details section.
Example
The following code shows how to use the summary and details Elements.
<!DOCTYPE HTML>
<html>
<head>
<style>
details {<!--from ww w . j a v a 2 s .co m-->
border: solid thin black;
padding: 5px
}
details>summary {
font-weight: bold
}
</style>
</head>
<body>
<article>
<h1>H1</h1>
</header>
<section>
<p>This is a test.</p>
<details>
<summary>Summary</summary>
<ol>
<li>XML</li>
<li>HTML</li>
<li>CSS</li>
</ol>
</details>
</section>
</article>
</body>
</html>