Аккордеон для страницы урока в GetCourse

Аккордеон для страницы урока в GetCourse

Первоначальный скрипт и стили аккордеона я взял у Максима Калмыкова. Но по необъяснимым причинам, через какое-то время скрипт перестал работать у меня сразу в двух школах. 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), чтобы текст на вкладке аккордеона был выровнен по левому краю.

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

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

Аккордеон в уроке GetCourse
Подписаться
Уведомить о
guest

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Прошу прощения за это всплывающее окно, но закон обязывает уведомить вас о том, что сайт собирает cookies. Продолжая использовать сайт, вы соглашаетесь с Политикой конфиденциальности