HTML and CSS Reference
functionality onto elements that weren't specifically designed for it. Part of the evolving HTML5
specification began its life as a spec originally dubbed “Web Applications 1.0,” which was intended to
standardize a set of elements and methods for managing interactive content in web pages.
details and summary
The details element represents a collapsible block of content from which a user can obtain additional
information or, when used in a form or application, additional controls or interactive functions. The
details element can contain any kind of content or other elements—including nested details
elements—and a user or script can expand or collapse the containing element to show or hide its contents.
element makes such behavior native to the browsers without the need for additional scripts. However, only
achieve the expand-and-collapse effect in other browsers.
Listing 8-27 shows an example of a details element containing additional product information that can be
hidden from view when the page loads, but the user can show it if they'd like to see more information.
Listing 8-27. Collapsible product information in a details element
<h3>V900 Portable Shrink Ray</h3>
<p>Shrink and unshrink inanimate objects with point-and-shoot simplicity!</p>
<dd>Midnight black, cherry red, powder blue, violet mist, seafoam green</dd>
<dd>10.8 x 4.3 x 8.5 inches (27.5 x 10.9 x 21.6 cm)</dd>
<dd>2.8 pounds (1.27 kg)</dd>
<dd>4.4mW quantum fusion battery (included)</dd>
A details element is initially closed when a browser renders the page. Alternatively, the Boolean open
attribute can instruct the browser to automatically show the contents of the details element when the
page loads, and a user can hide it if they so desire. Browsers that don't support the details element will
always show it in an opened, visible state.
The nested summary element acts as a title or legend for its parent details element. Browsers that
support these elements (such as Chrome, shown in Figure 8-32) will automatically add a visual indicator to
the summary to indicate whether the details are open or closed. If a summary element is absent,
supporting browsers will supply their own default show/hide toggle with a default text label such as