HTML and CSS Reference
In-Depth Information
Contain the full content with the details element and indicate the content area that is
“focusable” with summary :
<summary>Upcoming Topics</summary>
<p>For the new year, we have a great line up of articles!</p>
<li>Understanding the Outline Algorithm</li>
<li>When to Use <code>hgroup</code></li>
<li>Machine Semantics with Microdata</li>
This recipe sets up a solid semantic structure for a very common behavior that we
currently have to use JavaScript to achieve. The summary element indicates which con-
tent is the “control” that expands or collapses the full details content upon user focus
(see Figure 1-7 ). And, if you want to ensure that details is expanded by default (see
Figure 1-8 ), you can add the open attribute:
<details open >
Only Chrome currently supports this behavior. For the other browsers you still have
to use JavaScript to create expanding/collapsing content, because none of today's
browsers support the functionality of details and summary .
Figure 1-7. Default display of <summary> in Chrome 13 with collapsed <details> content
Search WWH ::

Custom Search