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
default.
Unfortunately, the
details
and
summary
elements are not well supported at the
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:
<details>
<summary>Legal Notice</summary>
<small>All content copyright 2011 Anselm Brad-
ford</small>
</details>
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:
<details>
<summary>A Midsummer Night's Dream</summary>
<p>Duration: 1hr 42m</p>
<p>Showtimes: </p>
<ul>
<li>Tuesday, 8pm</li>
Search WWH ::
Custom Search