HTML редактор

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>JavaScript - Как создать аккордион</title>
  <style>
    html {
      font-size: 16px;
    }

body {
      margin: 50px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      color: #666;
    }

.accordion {
      border-bottom: 1px solid #ddd;
    }

.accordion-item {
      border-top: 1px solid #ddd;
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
    }

.accordion-item-header {
      padding: 10px 15px;
      background: #a4b4bf;
      color: #fff;
      cursor: pointer;
    }

.accordion-item-content {
      background: #fff;
      transition: opacity .4s ease;
      visibility: hidden;
      height: 0;
      opacity: 0;
    }

.accordion-item.show .accordion-item-content {
      padding: 10px 15px;
      visibility: visible;
      height: auto;
      opacity: 1;
    }

.accordion-item.show .accordion-item-header {
      background: #3498db;
      color: #fff;
      border-bottom: 1px solid #ddd;
    }
  </style>
</head>

<body>

<div id="accordion" class="accordion" style="max-width: 400px; margin: 0 auto;">
    <div class="accordion-item show">
      <div class="accordion-item-header">
        Заголовок 1
      </div>
      <div class="accordion-item-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit pariatur nesciunt modi dicta, itaque eaque sint doloribus
        dignissimos consequatur rem id animi sed quibusdam voluptatem inventore aperiam ut excepturi fuga.
      </div>
    </div>

<div class="accordion-item">
      <div class="accordion-item-header">
        Заголовок 2
      </div>
      <div class="accordion-item-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos voluptas, corrupti repudiandae ea earum, aspernatur,
        dolores repellat odit sed minus enim dolore sint quaerat aliquam alias iusto illum ipsa rem?
      </div>
    </div>

<div class="accordion-item">
      <div class="accordion-item-header">
        Заголовок 3
      </div>
      <div class="accordion-item-content">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque cum pariatur incidunt fugit id repellendus voluptatum,
        odio modi quo eum facere doloribus numquam? Ipsam repudiandae, cumque cupiditate rerum deserunt necessitatibus?
      </div>
    </div>

</div>

return function () {
        var _mainElement = {}, // .accordion
          _items = {}, // .accordion-item
          _contents = {}; // .accordion-item-content

var _actionClick = function (e) {
          if (!e.target.classList.contains('accordion-item-header')) { // прекращаем выполнение функции если кликнули не по заголовку
            return;
          }
          e.preventDefault();   // Отменям стандартное действие
          // получаем необходимые данные
          var header = e.target,
            item = header.parentElement,
            itemActive = _getItem(_items, 'show');

if (itemActive === undefined) { // добавляем класс show к элементу (в зависимости от выбранного заголовка)
            item.classList.add('show');
          } else {
            // удаляем класс show у ткущего элемента
            itemActive.classList.remove('show');
            // если следующая вкладка не равна активной
            if (itemActive !== item) {
              // добавляем класс show к элементу (в зависимости от выбранного заголовка)
              item.classList.add('show');
            }
          }
        },
          _setupListeners = function () {
            // добавим к элементу аккордиона обработчик события click
            _mainElement.addEventListener('click', _actionClick);
          };

return {
          init: function (element) {
            _mainElement = (typeof element === 'string' ? document.querySelector(element) : element);
            _items = _mainElement.querySelectorAll('.accordion-item');
            _setupListeners();
          }
        }

}
    })();

var accordion1 = accordion();
    accordion1.init('#accordion');
  </script>

</body>

</html>