---
title: "Toggle Block — Collapsible Content in Blok"
description: "A collapsible block that owns nested child blocks, including toggle headings that keep their level."
source: https://blokeditor.com/docs/toggle/
lastmod: 2026-10-07
---

Framework JavaScript

Block Tools Toggle

# Toggle block: collapsible content

A collapsible toggle block with a clickable arrow. Child blocks are nested inside the toggle and hidden when it is collapsed.

You toggle it by clicking the arrow icon, or programmatically through the public Block API: `api.blocks.getById(id)?.call("expand")` / `.call("collapse")`. Toggle headings (Header blocks with `isToggleable: true`) accept the same two commands. These are string-addressed commands routed through `BlockAPI.call()`. They are not declared as methods on the exported tool classes.

The open or collapsed state is personal. Each browser remembers it for itself, and it is never saved. A toggle starts collapsed, except for the person who just created it.

### Import

TypeScript

```
import { Toggle } from '@bloklabs/core/tools';
```

### Configuration

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `string` | `"Toggle"` | Placeholder text shown in an empty toggle block. |

### Save Data

TypeScript

```
interface ToggleData {
  text: RichText; // Toggle title as segments (ToggleToolData holds HTML)
}
```

JSON

```
{
  "id": "mno345",
  "type": "toggle",
  "data": {
    "text": [{ "text": "Click to expand" }]
  }
}
```

### Usage Example

TypeScript

```
import { Blok } from '@bloklabs/core';
import { Toggle } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    toggle: {
      class: Toggle,
      placeholder: 'Toggle heading…',
    },
  },
});
```