DONT ADD ANYTHING HERE!

  1. details
    1. The details element represents a disclosure widget from which the user can obtain additional information or controls
    2. The details element is not appropriate for footnotes
    3. The first summary element child of the element, if any, represents the summary or legend of the details
    4. If there is no child summary element, the user agent should provide its own legend (e.g. "Details")
    5. A disclosure widget is typically presented onscreen using a small triangle that rotates (or twists) to indicate open/closed status, with a label next to the triangle
  2. open
    1. The open content attribute is a boolean attribute
    2. If present, it indicates that the details are to be shown to the user
    3. If the attribute is absent, the details are not to be shown
  3. summary
    1. The summary element represents a
      1. summary
      2. caption
      3. legend
      for the rest of the contents of the summary element's parent details element, if any.

Example

HTML

<section class="progress window">
    <h1>Copying "Really Achieving Your Childhood Dreams"</h1>
    <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>

Browser

Copying "Really Achieving Your Childhood Dreams"

Copying... 25%
Transfer rate:
452KB/s
Local filename:
/home/rpausch/raycd.m4v
Remote filename:
/var/www/lectures/raycd.m4v
Duration:
01:16:27
Color profile:
SD (6-1-6)
Dimensions:
320×240

References