---
title: "Блок «Переключатель» — сворачиваемый контент"
description: "Сворачиваемый блок, который владеет вложенными дочерними блоками, включая заголовки-переключатели с уровнем."
source: https://blokeditor.com/ru/docs/toggle/
lastmod: 2026-10-07
---

Фреймворк JavaScript

Блочные инструменты Переключатель

# Переключатель: сворачиваемый контент

Сворачиваемый блок-переключатель с кликабельной стрелкой. Дочерние блоки вкладываются внутрь переключателя и скрываются, когда он свёрнут.

Переключать его можно кликом по иконке стрелки или программно через публичный Block API: `api.blocks.getById(id)?.call("expand")` / `.call("collapse")`. Сворачиваемые заголовки (блоки Header с `isToggleable: true`) принимают те же две команды. Это команды, которые адресуются строкой и маршрутизируются через `BlockAPI.call()`. Как методы экспортируемых классов инструментов они не объявлены.

Состояние «открыт или свёрнут» у каждого своё. Каждый браузер запоминает его сам, и оно никогда не сохраняется. Переключатель открывается свёрнутым, кроме как у того, кто его только что создал.

### Импорт

TypeScript

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

### Конфигурация

| Опция | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `placeholder` | `string` | `"Toggle"` | Плейсхолдер, который показывается в пустом блоке переключателя. |

### Формат данных

TypeScript

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

JSON

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

### Пример использования

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