> For the complete documentation index, see [llms.txt](https://docs.salebot.pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.salebot.pro/websites/builder/sekcii-bloki/sekciya-akkordeon.md).

# Секция "Аккордеон"

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

<figure><img src="/files/80FuwWshoHc1rWiZK1AM" alt="" width="563"><figcaption></figcaption></figure>

"Аккордеон" достаточно просто внедрить на сайт и настроить под собственные нужды: он может отлично вписаться под любые необходимые запросы. &#x20;

## Как добавить и настроить "Аккордеон"?

Чтобы добавить элемент в ваш сайт, перейдите в настройки сайта и нажмите плюс, чтобы открыть меню с доступными в Сейлбот секциями

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

Затем в открывшемся меню с секциями найдите блок "Аккордеон":

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

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

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

## Настройка контента

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

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

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

<figure><img src="/files/Kjl2nPiX57KKRXXMNERO" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/FKwXW20wZEqRJBcSp87J" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/oTCEfdzFJsXpNNGVMVaQ" alt="" width="563"><figcaption></figcaption></figure>

Можно добавить необходимое количество карточек контента:&#x20;

<figure><img src="/files/VUV8KraM6ZACEcoejZ2b" alt="" width="563"><figcaption></figcaption></figure>

## Кастомизация контента

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

<figure><img src="/files/etaCCHEA0AeG6RrDMPf5" alt="" width="327"><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/6GGU2ziqOwVqhCdvTxkL" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

Чтобы выбрать размер иконки, по нажатию на которую открывается текст-ответ, достаточно воспользоваться данным полем "Ширина иконки", который также принимает исключительно числовое значение:

<figure><img src="/files/uSf5Wsnp0IvGmEdI0reH" alt="" width="440"><figcaption></figcaption></figure>

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

<figure><img src="/files/8xl7RwcfgKbqv3xzuGu2" alt="" width="563"><figcaption></figcaption></figure>

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

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

Теперь вы знаете, как устанавливать блок "Аккордеон" на свой сайт и настраивать контент внутри блока.&#x20;

## Кастомизация блока (секции): настройки шрифтов, фона и отображения

Для кастомизации блока "Аккордеон" вам понадобятся универсальные настройки секции (блоков), в которые входят настройки шрифтов, фона и отображения.

<figure><img src="/files/HnIgd9Lv2U9Vd5T3APtx" alt="" width="375"><figcaption></figcaption></figure>

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

{% hint style="info" %}
Подробнее об универсальных настройках секций (блоков) сайта [читайте в одноименной статье.](broken://pages/oX6Y9RGmKT74x44vZ8gr)&#x20;
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.salebot.pro/websites/builder/sekcii-bloki/sekciya-akkordeon.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.