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>Аккордион для сайта на CSS и JavaScript</title>
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

html {
      font-family: sans-serif;
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      text-align: left;
      background-color: #fff;
    }

.container {
      margin: 50px;
    }

.accordion-item {
      margin-bottom: 1px;
    }

.accordion-item:last-child {
      margin-bottom: 0;
    }

.accordion-item-header {
      padding: 10px 10px 10px 20px;
      background: #4d5159;
      color: rgba(255, 255, 255, .8);
      cursor: pointer;
      text-transform: uppercase;
      font-family: sans-serif;
      position: relative;
    }

.accordion-item.show .accordion-item-header,
    .accordion-item-header:hover,
    .accordion-item-header:focus {
      background: #3b3e44;
    }

.accordion-item-header::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 10px;
      background: rgba(255, 255, 255, .5);
    }

.accordion-item-header::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 12px;
      width: 16px;
      height: 16px;
      margin-top: -8px;
      background-size: cover;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.5 26.5' height='100' width='100'%3E%3Cpath d='M25.8 6.2l-1.2-1.3c-.5-.5-1-.7-1.6-.7a2 2 0 00-1.5.7l-8.3 8.4L5 4.9a2 2 0 00-1.6-.7c-.5 0-1 .2-1.5.7L.6 6.2c-.4.4-.6 1-.6 1.5 0 .7.2 1.2.6 1.6l11.1 11.2c.4.4 1 .7 1.5.7a2 2 0 001.6-.7l11-11.2c.4-.4.7-1 .7-1.6 0-.6-.3-1-.7-1.5z' fill='%23fff'/%3E%3C/svg%3E");
    }

.accordion-item-content {
      display: none;
    }

.accordion-item.show .accordion-item-content {
      display: block;
    }

.accordion-item.show .accordion-item-header::after {
      transform: rotate(180deg);
    }

.accordion-subitems {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

.accordion-subitem>a {
      padding: 10px 10px 10px 20px;
      background: #ebeaec;
      color: #333;
      cursor: pointer;
      text-transform: uppercase;
      font-family: sans-serif;
      position: relative;
      margin-top: 1px;
      display: block;
      text-decoration: none;
    }

.accordion-subitem>a::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 10px;
      background: rgba(255, 255, 255, .5);
    }

.accordion-subitem.active>a {
      background: #d4d3d5;
      pointer-events: none;
    }

.accordion-subitem a:hover,
    .accordion-subitem a:focus {
      background: #d4d3d5;
    }

.accordion-item-header-count {
      position: absolute;
      top: 50%;
      right: 10px;
      width: 24px;
      height: 24px;
      transform: translateY(-50%);
      text-align: center;
      background: rgba(255, 255, 255, .8);
      color: #000;
      line-height: 24px;
      border-radius: 12px;
    }
  </style>
</head>

<body>

<div id="accordion" class="accordion" style="max-width: 400px; margin: 0 auto;">
      <div class="accordion-item">
        <div class="accordion-item-header">
          Заголовок 1
        </div>
        <div class="accordion-item-content">
          <ul class="accordion-subitems">
            <li class="accordion-subitem">
              <a href="#">Пункт 1.1</a>
            </li>
            <li class="accordion-subitem active">
              <a href="#">Пункт 1.2</a>
            </li>
            <li class="accordion-subitem">
              <a href="#">Пункт 1.3</a>
            </li>
            <li class="accordion-subitem">
              <a href="#">Пункт 1.4</a>
            </li>
            <li class="accordion-subitem">
              <a href="#">Пункт 1.5</a>
            </li>
          </ul>
        </div>
      </div>

<div class="accordion-item">
        <div class="accordion-item-header">
          Заголовок 2
        </div>
        <div class="accordion-item-content">
          <ul class="accordion-subitems">
            <li class="accordion-subitem">
              <a href="#">Пункт 2.1</a>
            </li>
            <li class="accordion-subitem">
              <a href="#">Пункт 2.2</a>
            </li>
            <li class="accordion-subitem">
              <a href="#">Пункт 2.3</a>
            </li>
            <li class="accordion-subitem">
              <a href="#">Пункт 2.4</a>
            </li>
          </ul>
        </div>
      </div>

<div class="accordion-item">
        <div class="accordion-item-header">
          Заголовок 3
        </div>
        <div class="accordion-item-content">
          <ul class="accordion-subitems">
            <li class="accordion-subitem">
              <a href="#">Пункт 3.1</a>
            </li>
            <li class="accordion-subitem">
              <a href="#">Пункт 3.2</a>
            </li>
            <li class="accordion-subitem">
              <a href="#">Пункт 3.3</a>
            </li>
            <li class="accordion-subitem">
              <a href="#">Пункт 3.4</a>
            </li>
            <li class="accordion-subitem">
              <a href="#">Пункт 3.5</a>
            </li>
            <li class="accordion-subitem">
              <a href="#">Пункт 3.6</a>
            </li>
            <li class="accordion-subitem">
              <a href="#">Пункт 3.7</a>
            </li>
          </ul>
        </div>
      </div>

</div>

var accordion = (function (element) {

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>