Модуль «dropdown». Выпадающие панельки при клике на кнопку.

Демо:

https://codepen.io/ildar-meyker/pen/yLZmxeV

Плагины:

Подключение:

//

Разметка:

// 

<div class="demo">
  <div class="demo__item js-dropdown-parent">
  
    <button class="js-dropdown-btn" data-target="#panel-1">
      Программа обучения
    </button>

    <div class="demo__panel" id="panel-1">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint esse quidem, consequuntur nihil enim similique dolores vitae accusantium excepturi, culpa sed magnam quia amet ratione earum tempora assumenda blanditiis. Placeat?
    </div>
  </div>

  <div class="demo__item js-dropdown-parent">

    <button class="js-dropdown-btn" data-target="#panel-2">
      Форма обучения
    </button>

    <div class="demo__panel" id="panel-2">
      Placeat? Lorem ipsum dolor consequuntur nihil enim similique dolores vitae accusantium excepturi, culpa sed magnam quia amet ratione earum tempora assumenda blanditiis. 
    </div>
  </div>
</div>

Стили:

//
.demo {
  display: flex;
  gap: 20px;
  
  &__item {
    position: relative;
  }
  
  &__panel {
    transition: all .2s;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 10px;
    width: 300px;
    padding: 10px 20px;
    box-shadow: 0px 4px 10px 0px rgba(33, 34, 46, 0.1);
    visibility: hidden;
    opacity: 0;
    transform: translateY(2rem);
    
    &.active {
      transform: translateY(0);
      visibility: visible;
      opacity: 1;
    }
  }
}

Инициализация:

// dropdown.js

let activeBtn = null;

function update(btnEl, isActive) {
    const target = $(btnEl).data("target");
    $(target).add(btnEl).toggleClass("active", isActive);
}

function activate(btnEl) {
    update(btnEl, true);
}

function deactivate(btnEl) {
    update(btnEl, false);
}

function handleBtnClick(e) {
    e.preventDefault();

    if (activeBtn) {
        deactivate(activeBtn);
    }

    if (this === activeBtn) {
        // already deactivated
        activeBtn = null;
    } else {
        activate(this);
        activeBtn = this;
    }
}

function handleOutsideClick(e) {
    if (!activeBtn) return;
    if ($(e.target).closest(".js-dropdown-parent").length) return;

    deactivate(activeBtn);
    activeBtn = null;

    console.log("dropdown:handleOutsideClick");
}

$(function () {
    $(document).on("click", ".js-dropdown-btn", handleBtnClick);
    $(document).on("click", handleOutsideClick);
});