---
title: "Details extension"
description: "Use the Details extension in Tiptap to enable the HTML tag for showing and hiding content. Learn more in our docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/nodes/details"
---

# Details extension

Use the Details extension in Tiptap to enable the HTML tag for showing and hiding content. Learn more in our docs!

The Details extension enables you to use the `<details>` HTML tag in the editor. This is great to show and hide content.

> **Interactive demo:** [Details](https://embed.tiptap.dev/preview/Nodes/Details)

## Install

```bash
npm install @tiptap/extension-details
```

This extension requires the [`DetailsSummary`](https://tiptap.dev/docs/editor/extensions/nodes/details-summary.md) and [`DetailsContent`](https://tiptap.dev/docs/editor/extensions/nodes/details-content.md) node.

## Settings

### persist

Specify if the open status should be saved in the document. Defaults to `false`.

```js
Details.configure({
  persist: true,
})
```

### openClassName

Specifies a CSS class that is set when toggling the content. Defaults to `is-open`.

```js
Details.configure({
  openClassName: 'is-open',
})
```

### renderToggleButton

Customize the button that toggles a details node. The callback receives the button `element`, the current `isOpen` state, and the `node` that should be used to derive the label.

This is useful when you want to change the button's accessible label or update the button element directly.

```js
Details.configure({
  renderToggleButton: ({ element, isOpen, node }) => {
    element.setAttribute(
      'aria-label',
      isOpen
        ? `Collapse details: ${node.textContent || 'details'}`
        : `Expand details: ${node.textContent || 'details'}`,
    )
  },
})
```

### HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

```js
Details.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

## Commands

### setDetails()

Wrap content in a details node.

```js
editor.commands.setDetails()
```

### unsetDetails()

Unwrap a details node.

```js
editor.commands.unsetDetails()
```