details: Creates a disclosure widget that hides information until it’s toggled

The HTML element called <details> creates a disclosure widget that hides information until it’s toggled open. It requires a <summary> element to provide a label or summary.

Typically, a disclosure widget is represented by a small triangle that rotates or twists to indicate its open or closed state, accompanied by a label. The text inside the <summary> element serves as the label for the widget.

A <details> widget can be in a closed state by default, showing only the triangle and label inside <summary>. When the user clicks on the widget or focuses it and presses the space bar, it opens up to reveal its contents. The rotating or twisting triangle is commonly associated with this type of widget and is sometimes referred to as a “twisty.”

You can use CSS to style the disclosure widget and programmatically control its open and closed states by setting or removing its open attribute. However, there is currently no built-in method for animating the transition between open and closed states.

When closed, the widget’s height is limited to display only the disclosure triangle and summary. When open, it expands to show the details contained within.

Fully compliant implementations automatically apply the CSS display: list-item to the <summary> element, allowing further customization. Refer to the “Customizing the disclosure widget” section for more details.

The <details> element has an open attribute, which is a Boolean indicating whether the details (contents of the <details> element) are currently visible. The details are displayed when the attribute is present and hidden when it’s absent. By default, the attribute is absent, making the details not visible. To hide the details completely, you need to remove this attribute entirely. Using open=”false” actually makes the details visible because the attribute is Boolean.

In addition to the standard events supported by HTML elements, the <details> element also supports the toggle event. This event is dispatched whenever the state of the <details> element changes between open and closed. You can add an event listener for the toggle event to detect these state changes and perform actions accordingly.

A Simple Disclosure Example

The <details> element in HTML provides a convenient way to create a disclosure widget, allowing you to hide and reveal information as needed. By default, the widget appears closed, showing only a small triangle and a summary or label. When clicked or interacted with, it expands to display the hidden contents. Let’s explore a simple example to understand its usage.

<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

In this example, we have a <details> element with a <summary> element inside. The summary acts as the label for the disclosure widget. When the user clicks on the summary, the hidden content (in this case, a paragraph) is revealed.

Creating an Open Disclosure Box

By default, the <details> element appears closed, but what if you want it to be open initially? You can achieve this by adding the open attribute to the <details> element.

<details open>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

In this modified example, we added the open attribute to the <details> element. Now, when the page loads, the disclosure widget is already expanded, showing the hidden content immediately.

Customizing the disclosure widget

These CSS styles create a tabbed interface-like appearance, where clicking the tab opens it to reveal its contents. The selector details[open] targets the open element for further styling.

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

Browser Compatibility

Before implementing the <details> element in your web page, it’s essential to consider its browser compatibility. While the <details> element is widely supported, there might be slight variations and quirks across different browsers. Let’s take a look at the compatibility table below:

Please note that the compatibility information is based on the latest available data and may be subject to change with future browser updates. It’s always a good practice to test your web pages across multiple browsers to ensure consistent behavior.

Understanding browser compatibility can help you make informed decisions when using the <details> element in your projects, ensuring a smooth experience for your users.

In conclusion, the <details> element provides a convenient way to create disclosure widgets, enabling you to hide and reveal information with ease. By understanding how to use it, customize its appearance, and consider browser compatibility, you can leverage this element effectively in your web development endeavors.