---
title: "Toggle Block — Collapsible Content in Blok"
description: "A collapsible block that owns child blocks through contentIds, including toggle headings that keep their level."
source: https://blokeditor.com/docs/toggle/
lastmod: 2026-09-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 collapsed. Toggling is controlled by clicking the arrow icon, or programmatically via 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/collapsed state is persisted via `isOpen` and restored on reload; toggles default to open.

### 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: string;     // Toggle title HTML content
  isOpen?: boolean; // Whether the toggle is expanded — persisted and restored on reload
}
```

JSON

```
{
  "id": "mno345",
  "type": "toggle",
  "data": {
    "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…',
    },
  },
});
```