View video tutorial

HTML <details> Tag

HTML

The <details> tag opens or closes a disclosure widget.

HTML <details> Tag


The <details> tag specifies additional details that the user can open as needed, which are usually closed initially.

It creates a disclosure widget where the information is visible only when the widget is toggled to an "open" state.

A disclosure widget is usually presented onscreen using a small triangle or an arrow that rotates to indicate open / closed position.

Element Attributes

Attribute Value Description
open open Specifies that the details should be visible.(Don't use open="false" it still makes the details visible.)

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<details>
    <summary>show details</summary>
    <p>The details tag specifies additional details that the user can open as needed, which are usually closed
        initially. It creates a disclosure widget where the information is visible only when the widget is toggled to an "open"
        state.</p>
</details>
Try it Now »

Click on the "Try it Now" button to see how it works.