Assembling Forms and Applications - HTML5 with CSS3 - page 284

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.
This sort of “expand and collapse” effect was previously only possible with JavaScript, but the details
element makes such behavior native to the browsers without the need for additional scripts. However, only
a few browsers have yet implemented support for the details element, so you'll still need JavaScript to
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
<div class="item">
<h3>V900 Portable Shrink Ray</h3>
<p>Shrink and unshrink inanimate objects with point-and-shoot simplicity!</p>
<p><strong class="price">$10,799</strong></p>
<details>
<summary>Product info</summary>
<dl>
<dt>Colors</dt>
<dd>Midnight black, cherry red, powder blue, violet mist, seafoam green</dd>
<dt>Dimensions</dt>
<dd>10.8 x 4.3 x 8.5 inches (27.5 x 10.9 x 21.6 cm)</dd>
<dt>Shipping Weight</dt>
<dd>2.8 pounds (1.27 kg)</dd>
<dt>Power Supply</dt>
<dd>4.4mW quantum fusion battery (included)</dd>
</dl>
</details>
</div>
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