# Раздел аккордеона

Блок Accordion — это удобное графическое решение для сайта в виде списка текстовых заметок с раскрывающимися элементами:

«Accordion» достаточно легко встроить на сайт и настроить под свои нужды: он может идеально подойти под любые необходимые запросы.

<figure><img src="/files/0b5e236405e35f8e87d267b4a299e508602125cf" alt=""><figcaption></figcaption></figure>

## Как добавить и настроить «Accordion»?

Чтобы добавить элемент на сайт, перейдите в настройки сайта и нажмите плюс, чтобы открыть меню с разделами, доступными в Salebot.

<figure><img src="/files/e7e6d164d827cf91aa35b26fb5bae75a3b849c35" alt=""><figcaption></figcaption></figure>

Затем в открывшемся меню разделов найдите блок «Accordion».

Далее вы увидите пустой добавленный блок, в котором нужно настроить содержимое в виде карточек и тип самих карточек аккордеона:

<figure><img src="/files/e55750ca7a3adc09f7aefb9c44d305a4dd46c665" alt=""><figcaption></figcaption></figure>

## Настройки содержимого

Сначала добавим карточки с содержимым: для этого нужно нажать на кнопку «Content», а затем добавить саму карточку, которая будет содержать заголовок и, соответственно, текст:

<figure><img src="/files/4fa8ff7f019a15ad7c985d1b55422b6660fe51ac" alt=""><figcaption></figcaption></figure>

В ваше содержимое была добавлена пустая карточка, в которой можно добавить текст вопроса, изображение и текст ответа:

<figure><img src="/files/f576e3a13734d93d2f820e851e1e6e31300c308f" alt=""><figcaption></figcaption></figure>

Текстовый элемент блока имеет настройки, похожие на настройки любого текстового редактора: настройки жирности, курсива, подчёркивания, высоты шрифта и обводки шрифта, цвета и многое другое.&#x20;

Чтобы применить его настройки к тексту, выделите нужную часть текста и выберите настройки текста<br>

<figure><img src="/files/1a24ea5e288d5e8fe0d9662b9b845d4aa0e515a2" alt=""><figcaption></figcaption></figure>

Далее при необходимости загрузите изображение и добавьте поясняющий текст — ответ на вопрос:

<figure><img src="/files/b20f63d0cd52296f65293fbf233cf4f1eb5ee090" alt=""><figcaption></figcaption></figure>

Вы можете добавить необходимое количество карточек с содержимым.

## Настройка содержимого

После добавления необходимого количества карточек с содержимым перейдите к настройкам содержимого:

<figure><img src="/files/d71e53e19924a4e24777a27b3edafc3f2fcd99c0" alt=""><figcaption></figcaption></figure>

Далее вы можете установить галочку, чтобы была открыта первая карточка аккордеона или только одна из карточек.

Выберите настройку вертикального отступа между вопросами в блоке:

<figure><img src="/files/6380df564584a3c38f79dbd111bcad3369e5c534" alt=""><figcaption></figcaption></figure>

Также с помощью этого поля, принимающего только числовые значения, вы можете скруглить углы карточек:

<figure><img src="/files/4d6b8a410816f12a0e5be23ed383f337b38a911a" alt=""><figcaption></figcaption></figure>

Текстовый элемент (как и кнопка) в карточке всегда находится по центру относительно верхнего и нижнего краёв. Чтобы выбрать нужное расстояние, введите числовое значение в поле «Внутренний отступ сверху и снизу»:

<figure><img src="/files/5735880ddccec99a2da13c9828268869969c7807" alt=""><figcaption></figcaption></figure>

Также всё содержимое карточки (включая текст и кнопку для раскрытия текста ответа) расположено по центру относительно правого и левого краёв. Чтобы настроить отступы слева и справа, используйте поле «Внутренний отступ слева и справа»:

<figure><img src="/files/9b2525019ba0ef73c3d60676d0627ffd9ea4226d" alt=""><figcaption></figcaption></figure>

Чтобы выбрать размер иконки, открывающей текст ответа, просто используйте это поле Icon «Width», которое также принимает исключительно числовое значение:

<figure><img src="/files/696a6edd761f0000a93e63e5bb70599070b5d061" alt=""><figcaption></figcaption></figure>

Если изображение внутри карточки слишком большое, вы можете выбрать его ширину, указав нужное значение в поле «Ширина изображения»:

<figure><img src="/files/2c227234f67107c353d572550f06ec6a81b9bf3d" alt=""><figcaption></figcaption></figure>

Далее выберите цветовую палитру для каждого элемента вашего аккордеона: текста, фона карточки, иконки и т. д.:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfKEyYkboD6oWWhNptq6-ZQmr-_De9gc7i2_vg3qiNZXUcHQeC5ssYMpgcnnlIMrrG_dp6Uttgmzd6tYQ73PyFQPtzqAB-xyiCkk4mGRKD_GVhWHz6PhYZjP0i1s7He4b-zorhz1w?key=GhZKz5_ynA-V2Mz8EctHIQ" alt=""><figcaption></figcaption></figure>

Теперь вы знаете, как установить блок «Accordion» на свой сайт и настроить содержимое внутри блока.<br>

## Настройка блока (секции): шрифт, фон и параметры отображения

Чтобы настроить блок «Accordion», вам понадобятся универсальные настройки секции (блоков), которые включают настройки шрифта, фона и отображения.

<figure><img src="/files/3c0c18d663af07e4b25a4e1c436ba39e6efb370b" alt=""><figcaption></figcaption></figure>

Настройки секции (блока), а именно шрифты, фон и отображение, одинаковы для всех блоков.

{% hint style="info" %}
[Подробнее об универсальных настройках секций (блоков) сайта читайте в статье](/doc/ru/websites/saity/blocks/settings.md)&#x20;
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/ru/websites/saity/blocks/accordion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.