HTML and CSS Reference
In-Depth Information
Solution
Contain the full content with the
details
element and indicate the content area that is
“focusable” with
summary
:
<details>
<summary>Upcoming Topics</summary>
<p>For the new year, we have a great line up of articles!</p>
<ul>
<li>Understanding the Outline Algorithm</li>
<li>When to Use <code>hgroup</code></li>
<li>Machine Semantics with Microdata</li>
</ul>
</details>
Discussion
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
