details

I. Description

The HTML details element is used to create a word which when clicked will reveal more written information.

Generally this is used when you want to create a description or further information which users may view only when the word is clicked, thus minimizing the amount of visual clutter on a webpage.

II. 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>