---
title: "DetailsSummary extension"
description: "Use the DetailsSummary extension to enable the `` HTML tag for your `` content. Learn more in our docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/nodes/details-summary"
---

# DetailsSummary extension

Use the DetailsSummary extension to enable the `` HTML tag for your `` 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
```

## Usage

```js
import { Details, DetailsSummary, DetailsContent } from '@tiptap/extension-details'

const editor = new Editor({
  extensions: [Details, DetailsSummary, DetailsContent],
})
```

## Settings

### HTMLAttributes

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

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