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

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

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

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

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FCv8D0S0jywCe8Z11Rp55%2Fimage.png?alt=media&#x26;token=46ce54e6-7712-4498-bfa0-cac47d12481c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FvfDg6YTAm5Z67U7kFGIo%2Fimage.png?alt=media&#x26;token=ce6acb9c-25a7-423b-b61a-c069e285db93" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FYPorKxqYUPP8ZAe9wQaJ%2Fimage.png?alt=media&#x26;token=fa5d5b26-a21f-4dc3-abf2-9bf9d9bf09e1" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FxFRVRGpIS7VMgtHq7BML%2Fimage.png?alt=media&#x26;token=642da55b-0779-4795-aebb-6bf5d4dd5fa6" alt=""><figcaption></figcaption></figure>