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: #fff;
    }

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

.accordion-item-content {
      background: #383838;
      color: #fff;
      display: none;
    }

.accordion-item.show .accordion-item-content {
      padding: 10px 15px;
      display: block;
    }

.accordion-item.show .accordion-item-header {
      background: #da4453;
      color: #fff;
    }
  </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" style="height: 200px;">
        Контент 1...
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-item-header">
        Заголовок 2
      </div>
      <div class="accordion-item-content" style="height: 200px;">
        Контент 2...
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-item-header">
        Заголовок 3
      </div>
      <div class="accordion-item-content" style="height: 200px;">
        Контент 3...
      </div>
    </div>
  </div>

<div id="accordion2" 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" style="height: 200px;">
        Контент 1...
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-item-header">
        Заголовок 2
      </div>
      <div class="accordion-item-content" style="height: 200px;">
        Контент 2...
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-item-header">
        Заголовок 3
      </div>
      <div class="accordion-item-content" style="height: 200px;">
        Контент 3...
      </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');

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

</body>

</html>