> For the complete documentation index, see [llms.txt](https://docs.tiil.ru/nabor-bazovykh-stilei-dlya-getcourse/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tiil.ru/nabor-bazovykh-stilei-dlya-getcourse/ustanovka-nabora-stilei/ustanovka-i-ispolzovanie-akkordeona.md).

# Установка и использование аккордеона

Файлы для аккордеона расположены в отдельной папке `accordeon`. 

`accordeon-script.js` — файл со скриптом. Его можно установить в тему отдельным файлом, можно добавить скрипт в файл `scripts.js`. Если вам не нужны аккордеоны слишком часто, а лишь в единичных уроках, вы можете устанавливать его в конкретные уроки, чтобы скрипт не загружался на всех страницах школы.

То же относится и к файлу стилей для аккордеона `accordeon-styles.css`.

### Вставка аккордеона в урок

Чтобы добавить аккордеон на страницу урока, сначала добавьте стандартный блок «Заголовок и текст»

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

Далее для всего блока добавьте класс `accordeon_block`. Также не забудьте сделать ширину блока на все 12 колонок, чтобы аккордеон занял всю ширину урока (4).

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

Теперь добавляем класс `accordeon_item` для заголовка. Также измените выравнивание текста (3), чтобы текст на вкладке аккордеона был выровнен по левому краю.

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

Готово. Теперь остаётся только скопировать заголовки для создания дополнительных вкладок и наполнить их контентом.

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

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