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

Фреймворк JavaScript

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

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

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

### Импорт

TypeScript

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

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

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

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

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"
  }
}
```

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

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