Black Lives Matter! ✊🏾

details

The details element represents a disclosure widget from which the user can obtain additional information or controls. 4.11.1. The details element

Links about details

  1. Why <details> is Not an Accordion

    posted on by Dave Rupert

    tl;dr - <code><summary></code> is a button and buttons eat semantics

  2. Details / Summary Are Not [insert control here]

    posted on by Adrian Roselli

    Once major browsers started supporting <details> & <summary> developers immediately started to play with them to see what sorts of patterns they could enhance or replace. This is a good thing. Experimentation pushes boundaries, improves understanding. However, we need to be careful of christening th…

  3. The details and summary elements | scottohara.me

    posted on by Scott O'Hara

    The details and summary elements are two of HTML’s interactive elements and together are the elements that create a native disclosure widget.

<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>