---
title: "DetailsContent extension"
description: "Show and hide content with the Details and DetailsContent extension in your Tiptap Editor. Great to… toggle hiding content!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/nodes/details-content"
---

# DetailsContent extension

Show and hide content with the Details and DetailsContent extension in your Tiptap Editor. Great to… toggle hiding content!

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
DetailsContent.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```