The **`<details>`** element in HTML creates a widget that contains additional information that is only visible when the widget is in the "open" state. There are no restrictions on the content that can be included inside the `<details>` element.

By default, the widget created by the `<details>` element is in the "closed" state. You can click on the widget to toggle between the "open" and "closed" states to reveal or hide the additional information enclosed in the tag.

To use the `<details>` element, you need to include the `<summary>` element to specify a visible heading for the additional details, as shown below:

```HTML
<details>
     <summary>Heading</summary>
</details>
```

# Attributes

The `<details>` element supports the `open` attribute that specifies whether the content should be visible to the user. The contents are hidden by default. The `<details>` element also includes [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

# Events

The `<details>` element supports all the usual [events](https://developer.mozilla.org/en-US/docs/Web/API/Event) that are supported by HTML elements. In addition, `<details>` also supports the `toggle` event, which is triggered whenever the `<details>` element's state changes between "open" and "closed".

# Example

The code below shows how the `<details>` element works:

<html>
 
 <head>
   <title>What is the 'details' element?</title>
 </head>
 
 <body>
   <details>
     <summary>Learning About the Details Tag</summary>
     <p>This paragraph will only be visible when the tag is opened.
       If you click on the triangle again, this paragraph
       will disappear again. 
     </p>
   </details>
 </body>

</html>

codemirror

# Explanation

The `<summary>` element in *line 9* creates a visible heading. When you click on the small triangle to the left of this heading, the `open` attribute of the `<details>` element changes, and the contents of the `<details>` element becomes visible. Similarly, clicking on the triangle again changes the state of the `open` attribute, and the contents of the `<details>` element become invisible again.

If you want the contents of the `<details>` tag to be visible by default, then the opening `<details>` tag in *line 8* would need to be adjusted as shown below:

```HTML
<details open>
```

Since the `open` attribute is now present, the `<details>` element is rendered with the content being visible by default.

>Note: The style of the widget created by the `<details>` element can be changed using CSS. You may check the following [link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) to see how the appearance of the `<details>` element can be customized.

What is the <details> element in HTML?

The `<details>` element in HTML provides a toggleable widget for additional information, controlled via the `<summary>` element and toggle event.