Skip to content

Instantly share code, notes, and snippets.

@shearichard

shearichard/details-html-tag-example.html

Last active August 22, 2022 23:19
Show Gist options
  • Save shearichard/dce179dac77400548f36b6fe3b1ef728 to your computer and use it in GitHub Desktop.
Save shearichard/dce179dac77400548f36b6fe3b1ef728 to your computer and use it in GitHub Desktop.
Download ZIP
An Example of using the 'details' HTML tag
Raw
details-html-tag-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<cite>https://html.spec.whatwg.org/#details-notification-task-steps</cite
<section class="progress window">
<h2>An example of using the 'details' HTML tag</h2>
<p>Click on the arrow head to reveal/hide the details of this simulated copying process.</p>
<details>
<summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
<dl>
<dt>Transfer rate:</dt> <dd>452KB/s</dd>
<dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
<dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
<dt>Duration:</dt> <dd>01:16:27</dd>
<dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
<dt>Dimensions:</dt> <dd>320×240</dd>
</dl>
</details>
</section>
<section>
<p>This is what the underlying markup looks like...</p>
<code>
<section class="progress window">
<h2>An example of using the 'details' HTML tag</h2>
<p>Click on the arrow head to reveal/hide the details of this simulated copying process.</p>
<details>
<summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
<dl>
<dt>Transfer rate:</dt> <dd>452KB/s</dd>
<dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
<dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
<dt>Duration:</dt> <dd>01:16:27</dd>
<dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
<dt>Dimensions:</dt> <dd>320×240</dd>
</dl>
</details>
</section>
</code>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment