HTML5 Details and Summary Example

Quick usage of the details and summary elements

by Garve Hays

HTML

<h3>HTML5 Details Tag</h3>
<details>
  <summary>Details Example</summary>
  <p>Surprise! A quick statement</p>
</details>

<p><b>Notes</b>:</p>

<ol>
  <li><a href="https://www.w3schools.com/TAGS/tag_details.asp">HTML &lt;detals&gt; Tag</a></li>
  <li><a href="http://html5doctor.com/the-details-and-summary-elements/">The details and summary elements</a></li>
</ol>

CSS

body {
  font-family: sans-serif;
}

ol {
  list-style-position: inside;
  padding-left: 0;
}