# Аккордеон

### Как добавить блок?

Через меню добавления контентных блоков. [Подробнее о блоках](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню блока</summary>

![Image 001.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/image-001.jpg)

</details>### Как выглядит блок?

[![accordeon1-look-1.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon1-look-1.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon1-look-1.gif)

### Как работать с блоком?

Все просто. Создайте блок и начните заполнять пустые поля вашим контентом. В блоке «**Аккордеон**» можно добавить:

- заголовок каждой вкладки
- текст для каждой вкладки
- картинку для каждой вкладки

Картинки, которые вы добавили во «**Аккордеон**», всегда могут быть просмотрены учениками в полном размере.

<details id="bkmrk-%D0%97%D0%B0%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0"><summary>Заполнение блока</summary>

[![accordeon2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Еще есть возможность сгенерировать картинку с помощью нейросети.

<details id="bkmrk-%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8"><summary>Генерация картинки</summary>

 [![bandicam 2024-08-05 13-45-50-986.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-08/bandicam-2024-08-05-13-45-50-986.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-08/bandicam-2024-08-05-13-45-50-986.gif)

</details>
#### Как добавлять и удалять вкладки?

Количество вкладок в «**Аккордеоне**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить новую вкладку**» внизу. А удалить ненужные вкладки можно, нажав на значок «**Корзина**».

<p class="callout warning">Обратите внимание, что после удаления, восстановить вкладку невозможно.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE"><summary>Удаление и добавление вкладок</summary>

[![accordeon3-tabs.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon3-tabs.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon3-tabs.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Текст

Вы можете отформатировать текст внутри вкладки [с помощью текстового редактора](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst). Так он будет выглядеть аккуратнее.

##### Подсказка

Вы можете изменить текст подсказки.

<details id="bkmrk-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%BF%D0%BE%D0%B4"><summary>Изменение текста подсказки</summary>

[![accordeon4-info.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon4-info.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon4-info.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>##### Цвет

Цвет открытой вкладки наследуется из цветовой темы лонгрида.

### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Для дополнительной информации: можно сделать аккордеон с одной вкладкой и <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">вынести </span>туда дополнительную информацию, которую не страшно пропустить в лонгриде. Например, историческую справку по какому-то процессу или познавательные факты.
- Для разделения информации на разные категории: например, кратко описать 3 основных продукта компании.