FrameworkJavaScript

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…',
    },
  },
});