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 December 13, 2019 by Dave Rupert

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

   Tags:

   • accessibility
   

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

   posted on December 7, 2019 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…

   Tags:

   • accessibility
   

3. The details and summary elements | scottohara.me

   posted on September 3, 2018 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.

   Tags:

   • accessibility
   

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