Блок "Аккордеон" на Getcourse

Аккордеон-блок на геткурсе можно применить для описания популярных вопросов и ответов, мини-инструкций и т.п.

Часто подобный блок можно встретить на продающих страницах, в нем описывают популярные возражения, вопросы, сомнения и закрывают их в раскрывающейся при клике панели.

Данное решение предназначено для использования в визуальном конструкторе на платформе getcourse

Шаг 1. Добавляем CSS блок

CSS-код:

/* Подключение шрифта  Montserrat 400;600 */
@import url('https://fonts.googleapis.com/css2?family=El+Messiri&family=Montserrat:wght@400;600&display=swap');

:root {

  /* Цвет фона плашки */
  --ac_bgColor: #ffffff;

  /* Цвет заголовка */
  --ac_titleColor: #333333;

  /* Цвет текста */
  --ac_textColor: #777777;

  /* Цвет плюса */
  --ac_accentColor: #f9ba49;

  /* Цвет кружочка плюса */
  --ac_lightColor: #fff1d7;


  --fontM: "Montserrat", "proxima-nova", sans-serif;
}


.accordeon_block p {
  line-height: 1.4;
}

.accordeon_block p,
.accordeon_block div,
.accordeon_block .btn {
  font-family: var(--fontM);
}



.accordeon_item {
  margin-bottom: 10px;
  border: 1px solid #ededed;
  border-radius: 5px;
  background-color: var(--ac_bgColor);
  transition: box-shadow 0.4s ease;
}

.accordeon_item:hover {
  box-shadow: 0 15px 25px 0 rgb(0 0 0 / 4%);
  transition: box-shadow 0.4s ease;
}


/* Заголовок элемента аккордена */
.accordeon_item>.f-header {
  padding: 20px 60px 20px 15px;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.accordeon_item>.f-header p {
  margin: 0;
  font-size: 20px;
  user-select: none;
  color: var(--ac_titleColor);
}

/* Оформление плюса(+) */
.accordeon_item>.f-header::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  line-height: 1;
  font-size: 36px;
  font-weight: 400;
  font-family: "Arial", sans-serif;
  color: var(--ac_accentColor);
  transition: all .4s ease;
}

/* При наведнии на заголовок аккордеона */
.accordeon_item>.f-header:hover:after {
  background-color: var(--ac_lightColor);
  transition: all .4s ease;
}

/* При активном аккордеоне поворачиваем плюс */
.accordeon_item.active>.f-header:after {
  background-color: var(--ac_lightColor);
  transform: translateY(-50%) rotate(-45deg);
}

.accordeon_item.active>.f-header:hover:after {
  filter: brightness(101%);
}


/* Контейнер контента */
.accordeon_block .ac_content_wrapper {
  padding: 5px 15px 15px 15px;
}

/* Текст контента */
.accordeon_block .f-text {
  font-size: 16px;
  font-weight: 400;
  color: var(--ac_textColor);
}




/* Адапатация под моб. экраны */
@media (max-width: 640px) {

  .accordeon_item>.f-header {
    padding: 15px 50px 15px 15px;
  }

  .accordeon_item>.f-header p {
    font-size: 16px;
  }

  .accordeon_block .f-text {
    font-size: 14px;
  }

  .accordeon_item>.f-header::after {
    right: 5px;
    width: 40px;
    height: 40px;
    font-size: 32px;
  }

}

Шаг 2. Добавляем блоки контента и проставляем классы

Добавляем блок "Заголовок и текст"

Ставим этому блоку в настройках класс accordeon_block

Для заголовка(который будет заголовком вкладки элемента аккордеона) ставим класс accordeon_item

Контентные элементы ниже заголовка будут относиться к этому заголовку до следующего заголовка с классом accordeon_item

Шаг 3. Добавляем блок с js-кодом

JS-код:

/**
 * Script Name: Активация аккордеона в визуальном редакторе Getcourse
 * Version: 1.01
 * Author: Максим Калмыков
 * Url: https://t.me/getcomponent
 */

$(function () {


  accordeonInit({
    accordeonBlockSelector: '.accordeon_block', // Класс блока с аккордеоном
    isBind: false, // Активна только одна вкладка(на которой был клик) (true - да / false - нет)
    showFirstItem: true // Открыть первую вкладку (true - да / false - нет)
  });


});


function accordeonInit({ accordeonBlockSelector = '.accordeon_block', isBind = false, showFirstItem = false }) {

  const acItems = $(accordeonBlockSelector).find('.accordeon_item');

  if (acItems.length === 0) return;

  acItems.append('<div class="ac_content_wrapper" style="display: none; "></div>');

  acItems.each((_, item) => {

    $(item).find(".ac_content_wrapper").append($(item).nextUntil(".accordeon_item").not("style"));

    $(item).find(".f-header").on("click", function () {

      const acItem = $(this).parent();
      const acItemContent = $(this).nextAll('.ac_content_wrapper');


      console.log('acItemContent', acItemContent)
      if (isBind) {
        acItem.toggleClass('active').siblings().removeClass('active');

        acItem.parent().find('.ac_content_wrapper').slideUp();

        if (acItemContent.is(":hidden")) {
          acItemContent.slideDown();
        }

        return;
      }

      acItem.toggleClass('active');

      if (acItemContent.is(":hidden")) {
        acItemContent.slideDown();
      } else {
        acItemContent.slideUp();
      }

    });
  });


  if (showFirstItem) {

    const firstAcItem = $(`${accordeonBlockSelector} .accordeon_item`).eq(0);

    firstAcItem.addClass('active');
    firstAcItem.find(".ac_content_wrapper").show();
  }

}

В этом месте кода мы активируем аккордеон и можем включить некоторые настройки:

• isBInd - при нажатию на одну вкладку, она открывается а остальные закрываются (true - сделать, false - не делать)
• showFirstItem - Открыть первую вкладку (true - сделать, false - не делать)

Готово