FrameworkJavaScript

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