HTML and CSS Reference
In-Depth Information
Showing more info: summary and details
The summary and details elements work together to provide a “widget” that can
show and hide additional text without the use of JavaScript or CSS. The summary ele-
ment acts as a header (or summary, as the element name suggests) that provides a toggle
that may be clicked to show and hide the text between the details tags. By default,
the text inside details will be hidden until the toggle is clicked; however, a Boolean
attribute, open , may be added to the details element in order to show the text by
Unfortunately, the details and summary elements are not well supported at the
time of this writing, with only Google's Chrome browser, supporting this feature. 18 If
the browser you are using does not support these elements, all content within the details
area will be shown, and there won't be a toggle of any sort.
A basic example might look like this:
<summary>Legal Notice</summary>
<small>All content copyright 2011 Anselm Brad-
This will show a toggle and the text “Legal Notice,” which can be clicked to show and
hide the copyright statement. The details element can contain any flow elements,
which means the details could take on considerable complexity. For instance, this next
example presents some HTML that might appear on a theater's website. This example
uses the summary and details elements to show and hide additional information
about the theater's currently performing play:
<summary>A Midsummer Night's Dream</summary>
<p>Duration: 1hr 42m</p>
<p>Showtimes: </p>
<li>Tuesday, 8pm</li>
Search WWH ::

Custom Search