<details>: The HTML Details Element

1 Description

The HTML <details> element is used to create a word or phrase which when clicked will expand and reveal more information such as a definition or explanation of the word or phrase.

Generally the <details> element is used when you want to minimize the amount of visual clutter on a webpage but still allow users to view the extra information if they would like to.

How To Use The <details> Element

The <details> element should have a child <summary> element. The content of the <summary> element is what the user will click on. When the user clicks on the text in the <summary> element the text which is inside of the <details> element but outside of the <summary> element will be revealed.

2 Examples

<!DOCTYPE html>
<html>
    <head>
        <title>Example Page</title>
    </head>
    <body>
        <h1>Weather Forecast</h1>
        <h2>Wednesday - March 12, 2025</h2>
        <details>
            <summary>Morning Fog, 45 degrees Fahrenheit</summary>
            This morning will be foggy and cold, a high of 45 degrees Fahrenheit. Sunrise
            will occur at 07:29 AM (0729).
        </details>
        <details>
            <summary>Afternoon Sunny, 71 degrees Fahrenheit</summary>
            The fog is expected to clear by 11:00 AM (1100) and the rest of the day will
            be clear, with scattered clouds. The highest temperature of the day will be
            71 degrees Fahrenheit and will occur at approximately 5:15 PM (1715).
        </details>
        <details>
            <summary>Evening/Night Clear, 42 degrees Fahrenheit</summary>
            In the evening the sky will remain clear. Sunset will occur at 7:15 PM. The
            overnight low is expected to be 42 degrees Fahrenheit.
        </details>
    </body>
</html>

This document was last updated: