Первоначальный скрипт и стили аккордеона я взял у Максима Калмыкова. Но по необъяснимым причинам, через какое-то время скрипт перестал работать у меня сразу в двух школах. ChatGPT переписал мне его на нативном JavaScript (в оригинале Максим использует библиотеку jQuery), после чего работа аккордеона восстановилась. Функциональность полностью сохранена. А стили я немного переделал на свой вкус, заодно адаптировав их под свой набор стилей. Так что можете смело использовать — аккордеон встанет как родной.
Скрипт аккордеона
Можно вставить глобально в настройках аккаунта или в тему (лучше в тему). А можно непосредственно в том уроке, в котором он вам будет нужен:
document.addEventListener("DOMContentLoaded", function () {
accordeonInit({
accordeonBlockSelector: '.accordeon_block', // Класс блока с аккордеоном
isBind: false, // Активна только одна вкладка (на которой был клик) (true - да / false - нет)
showFirstItem: false // Открыть первую вкладку (true - да / false - нет)
});
});
function accordeonInit({ accordeonBlockSelector = '.accordeon_block', isBind = false, showFirstItem = false }) {
const accordeonBlock = document.querySelector(accordeonBlockSelector);
const acItems = accordeonBlock.querySelectorAll('.accordeon_item');
if (!acItems.length) return;
// Добавляем обертку для контента
acItems.forEach(item => {
const contentWrapper = document.createElement('div');
contentWrapper.classList.add('ac_content_wrapper');
contentWrapper.style.display = 'none';
// Перемещаем все последующие элементы, пока не встретим новый .accordeon_item
let sibling = item.nextElementSibling;
while (sibling && !sibling.classList.contains('accordeon_item')) {
contentWrapper.appendChild(sibling);
sibling = item.nextElementSibling;
}
item.appendChild(contentWrapper);
const header = item.querySelector('.f-header');
header.addEventListener('click', function () {
const acItemContent = contentWrapper;
if (isBind) {
// Закрываем другие элементы, если режим isBind включен
acItems.forEach(otherItem => {
if (otherItem !== item) {
otherItem.classList.remove('active');
const otherContent = otherItem.querySelector('.ac_content_wrapper');
otherContent.style.display = 'none';
}
});
}
// Переключаем класс active и показываем/скрываем контент
item.classList.toggle('active');
if (acItemContent.style.display === 'none') {
acItemContent.style.display = 'block';
} else {
acItemContent.style.display = 'none';
}
});
});
// Открыть первый элемент, если опция включена
if (showFirstItem && acItems.length > 0) {
const firstAcItem = acItems[0];
firstAcItem.classList.add('active');
const firstContent = firstAcItem.querySelector('.ac_content_wrapper');
firstContent.style.display = 'block';
}
}
Стили аккордеона
Также можете установить их глобально или в конкретный урок. Если у вс в школе установлен мой набор стилей, правила :root
и html
не добавляйте. Эти переменные подтянутся из темы.
/*Используйте этот блок стилей только для «чистой» установке в GetCourse*/
:root {
--base-font: inherit;
--r1: 1rem;
--primary-color: #167be5;
--light-gray: #e9eae9;
--white: #fff;
--black: #000;
}
html {
font-size: 14px;
}
/**/
.accordeon_block {
margin: 0 -15px 1rem -15px;
}
.accordeon_block p {
line-height: 1.4;
}
.accordeon_block p,
.accordeon_block div,
.accordeon_block .btn {
font-family: var(--base-font);
}
.accordeon_item {
margin-bottom: .5rem !important;
border-radius: var(--r1);
background-color: var(--white);
border: 1px solid var(--light-gray);
transition: all 0.3s ease-in-out;
}
/*Заголовок вкладки аккордена*/
.accordeon_item > .f-header {
padding: 1.25rem 4.5rem 1.25rem 1.25rem;
border-radius: var(--r1);
position: relative;
cursor: pointer;
}
.accordeon_item > .f-header p {
margin: 0;
font-size: 1.125rem;
user-select: none;
color: var(--black);
}
/*Оформление плюса(+)*/
.accordeon_item > .f-header:after {
content: '+';
position: absolute;
top: 50%;
right: 1.25rem;
transform: translateY(-50%);
width: 2.5rem;
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
line-height: 1;
font-size: 2rem;
font-weight: 400;
font-family: "Arial", sans-serif;
color: var(--primary-color);
transition: all .4s ease;
}
.accordeon_item > .f-header:hover:after {
background-color: var(--light-gray);
transition: all .4s ease;
}
.accordeon_item.active > .f-header:after {
background-color: var(--light-gray);
transform: translateY(-50%) rotate(-45deg);
}
.accordeon_item.active > .f-header:hover:after {
filter: brightness(101%);
}
/*Контейнер контента в аккордеоне*/
.accordeon_block .ac_content_wrapper {
padding: 0 1.5rem;
}
/*Стили текста во вкладках аккордеона*/
.accordeon_block .f-text {
font-size: 1rem;
font-weight: 400;
color: var(--black);
}
/*Стили для мобильных устройста*/
@media (max-width: 640px) {
.accordeon_item > .f-header {
padding: 1rem 2.5 1rem 1rem;
}
.accordeon_item > .f-header:after {
right: 1rem;
width: 2.5rem;
height: 2.5rem;
font-size: 1.75rem;
}
}
Вставка аккордеона в урок
Чтобы добавить аккордеон на страницу урока, сначала добавьте стандартный блок «Заголовок и текст»

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

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

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