The DETAILS/SUMMARY tag pair is an accessible method of creating an accessible in-page drop-down widget.

Example Uses

This can be used to reveal and hide a wide variety of items including the list below. Click the links to see how this can be implemented.

Example Self-Check

Question

Q: What does the abbreviation “HTML” signify?

Answer

Reveal the answer!

A: HTML = HyperText (HT) Markup Language (ML)

Understanding the Code

In the example above, the text of the answer is embedded in a DETAILS tag. The first tag below that is a SUMMARY tag which provides the text for the drop-down menu.

The code snippet also includes the text “Reveal the answer!” inside an H4 tag in order to provide a heading landing spot for screen readers. Finally the attribute TABINDEX=”0″ is added in order to ensure keyboard focus is supported.

View the HTML

Code Snippet

<h4>Answern</h4>
<details>
<summary tabindex="0">Reveal the answer!</summary>

<p>
A: HTML = HyperText <b class="danger">(HT)</b> 
Markup Language <b class="danger">(ML)</b>
</p>
</details>

Note that this is a fairly simple example. It is possible to include multiple paragraphs, lists, tables and specially formatted divs and spans below the SUMMARY tag. This makes it a very powerful item which can be implemented without any additional scripting.

View the CSS

In addition to the HTML code above, CSS can be used to add formatting to both the SUMMARY and DETAILS tag. In the CSS below, the code includes specifications to make the SUMMARY tag look more like a link. It also adds a border to the DETAILS tag.

details {
    border: 1px solid #333;
    background-color: white;
    color:#333;
    padding:1em}

summary {
font-weight: bold;
    color: #018;
    border: 2px solid transparent;
    margin:-1em;}

summary:focus, summary:hover {
    color: #018;
    text-decoration: underline;
    background-color:#def;
    border: 2px solid #018
}

Last Update: September 12, 2024