Аккордеон-меню

Чтобы добавить меню аккордеон в ваш проект, создайте виджет Code. Нажмите дважды на иконку виджета, удалите весь стандартный серый текст и вставьте следующий код во вкладку Widget code:

<div class="accordion-container">
  <p class="accordion" style="border-top: 1px solid #999;">Panel 1</p>
  <div class="accordion-content">
    <p>
      Text line 1
      <br />
      Text line 2
      <br />
      Text line 3
      <br />
      Text line 4
    </p>
    <br />
  </div>

  <p class="accordion">Panel 2</p>
  <div class="accordion-content">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ea odit dicta illum adipisci, consequatur numquam veniam harum hic temporibus possimus esse voluptatem omnis necessitatibus vero in facere totam iusto similique quas sapiente earum ipsam aut? Praesentium saepe, eaque aspernatur sapiente facere iusto? Aliquam libero dolorum inventore, illo animi magni eius nulla cupiditate quis, alias qui minus ratione possimus itaque sapiente sint assumenda consectetur sit at earum quod. Porro earum blanditiis delectus animi libero iste praesentium at sequi cupiditate numquam corrupti facilis nihil necessitatibus dolorum temporibus odio laudantium omnis, eos voluptates ipsam dolore quis enim ex! Pariatur cumque obcaecati modi.
    </p>
    <br />
  </div>

  <p class="accordion">Panel 3</p>
  <div class="accordion-content">
    <p>
      Text line 2
      <br />
      <a href="https://readymag.com/examples" target="_blank">examples</a>
      <br />
      Text line 3
      <br />
      Text line 4
    </p>
    <br />
  </div>

  <style>
    /* accordion title text styles */
    .accordion-container p.accordion {
      font-family: Inter;
      font-size: 18px;
    }

    /* accordion content text styles */
    .accordion-container .accordion-content p {
      font-family: Inter;
      font-size: 14px;
    }

    /* accordion content link styles */
    .accordion-container .accordion-content a {
      font-family: Inter;
      font-size: 14px;
      font-style: italic;
    }

    /* accordion title styles */
    .accordion-container .accordion {
      cursor: pointer;
      padding: 15px 8px;
      margin: 0;
      font-weight: 300;
    }

    /* accordion icon box styles */
    .accordion-container .accordion::after {
      content: '✕';
      float: right;
      transform: rotate(-45deg);
      font-size: 11px;
      transition: .2s ease-out;
    }

    /* accordion icon box styles: opened  */
    .accordion-container .active::after {
      content: "✕";
      transform: rotate(0deg);
      font-size: 11px;
    }

    /* accordion content box styles: default */
    .accordion-container .accordion-content {
      padding: 0 8px;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.2s ease-out;
      border-bottom: 1px solid #999;
    }

  </style>
</div>

<script>
  (function() {
  const accordionHeading = document.querySelectorAll(".accordion");
  const accordionContent = document.querySelectorAll(".accordion-content");

  for (let i = 0; i < accordionHeading.length; i++) {
    accordionHeading[i].onclick = function() {
      if (this.nextElementSibling.style.maxHeight) {
        hideContent();
      } else {
        showContent(this);
      }
    };
  }

  function showContent(elem) {
    hideContent();
    elem.classList.add("active");
    elem.nextElementSibling.style.maxHeight =
      elem.nextElementSibling.scrollHeight + "px";
  }

  function hideContent() {
    for (let i = 0; i < accordionContent.length; i++) {
      accordionContent[i].style.maxHeight = null;
      accordionHeading[i].classList.remove("active");
    }
  }
  })();
</script>

Не забудьте сохранить изменения, нажав на кнопку Save & Close. 

Вы можете изменить стиль текста и добавить разные переменные для тегов <p> и <a>, чтобы адаптировать меню аккордеон под ваш дизайн. Шрифт можно изменить, отредактировав font-family в следующем участке кода:

/* accordion title text styles */
.accordion-container p.accordion {
  font-family: Inter;
  font-size: 18px;
}

/* accordion content text styles */
.accordion-container .accordion-content p {
  font-family: Inter;
  font-size: 14px;
}

Если вы хотите воспользоваться кастомным шрифтом, то сначала его нужно добавить в библиотеку в текстовом виджете. После этого с помощью веб-инспектора найдите название font family и введите его во вставленном коде. 

Для того чтобы изменить границы контейнеров, отредактируйте border-bottom в .accordion-panel в разделе <style> в коде. 

Если вы хотите заменить иконку, раскрывающую ваше меню, или изменить стиль её анимации, то вы можете это сделать, отредактировав следующий участок кода: 

.accordion-container .accordion::after {
  content: '✕';
  float: right;
  transform: rotate(-45deg);
  font-size: 11px;
  transition: .2s ease-out;
}

.accordion-container .active::after {
  content: "✕";
  transform: rotate(0deg);
  font-size: 11px;
}

В переменной content текущую иконку можно заменить на любой текстовый символ или эмодзи.