<h2>Example 1</h2>
<div class="spoiler-list" data-spoiler-list>
  <div class="spoiler" data-spoiler>
    <div class="spoiler__heading" data-spoiler-trigger="">
      <div class="spoiler__title">Header 1</div>
      <div class="spoiler__arrow"></div>
    </div>
    <div class="spoiler__container">
      <div class="spoiler__content">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda quisquam quam eligendi iusto natus, obcaecati accusamus hic minima modi tempore aperiam ad, veniam facere. Similique voluptatum, illum voluptate ducimus consequuntur officiis incidunt doloribus nobis, exercitationem at accusantium quidem delectus numquam eaque dolor cum voluptates quam aut, modi quod qui laborum vero ut mollitia.
      </div>
    </div>
  </div>

  <div class="spoiler" data-spoiler="active">
    <div class="spoiler__heading" data-spoiler-trigger="">
      <div class="spoiler__title">Header 2</div>
      <div class="spoiler__arrow"></div>
    </div>
    <div class="spoiler__container">
      <div class="spoiler__content">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus, iusto a blanditiis culpa nam expedita dolore nemo ratione consequatur voluptatem, officiis, commodi nesciunt. Laborum quis numquam laboriosam minima est porro dignissimos? Ut non quod quos voluptatem asperiores ad similique quisquam quis porro inventore dignissimos harum veniam, cupiditate illo aut voluptatum in dolores?
      </div>
    </div>
  </div>

</div>

<h2>Example 2</h2>
<div class="spoiler-list" data-spoiler-list="accordion">
  <div class="spoiler" data-spoiler>
    <div class="spoiler__heading" data-spoiler-trigger="">
      <div class="spoiler__title">Header 1</div>
      <div class="spoiler__arrow"></div>
    </div>
    <div class="spoiler__container">
      <div class="spoiler__content">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda quisquam quam eligendi iusto natus, obcaecati accusamus hic minima modi tempore aperiam ad, veniam facere. Similique voluptatum, illum voluptate ducimus consequuntur officiis incidunt doloribus nobis, exercitationem at accusantium quidem delectus numquam eaque dolor cum voluptates quam aut, modi quod qui laborum vero ut mollitia.
      </div>
    </div>
  </div>

  <div class="spoiler" data-spoiler="active">
    <div class="spoiler__heading" data-spoiler-trigger="">
      <div class="spoiler__title">Header 2</div>
      <div class="spoiler__arrow"></div>
    </div>
    <div class="spoiler__container">
      <div class="spoiler__content">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus, iusto a blanditiis culpa nam expedita dolore nemo ratione consequatur voluptatem, officiis, commodi nesciunt. Laborum quis numquam laboriosam minima est porro dignissimos? Ut non quod quos voluptatem asperiores ad similique quisquam quis porro inventore dignissimos harum veniam, cupiditate illo aut voluptatum in dolores?
      </div>
    </div>
  </div>
  <div class="spoiler" data-spoiler>
    <div class="spoiler__heading" data-spoiler-trigger="">
      <div class="spoiler__title">Header 3</div>
      <div class="spoiler__arrow"></div>
    </div>
    <div class="spoiler__container">
      <div class="spoiler__content">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus, iusto a blanditiis culpa nam expedita dolore nemo ratione consequatur voluptatem, officiis, commodi nesciunt. Laborum quis numquam laboriosam minima est porro dignissimos? Ut non quod quos voluptatem asperiores ad similique quisquam quis porro inventore dignissimos harum veniam, cupiditate illo aut voluptatum in dolores?
      </div>
    </div>
  </div>
</div>

:root {
  /* color palette */
  --color-0-rgb: rgb(255, 255, 255);
  --color-0: 255, 255, 255;
}

body {
  background: #0b0b0b;
  color: #fff;
}

.spoiler {
  --spoiler-container-rows: 0fr;
  --spoiler-container-opacity: 0;
  --spoiler-container-maring: 0 0;
  --spoiler-container-padding: 0 16px;
  --spoiler-bgc-heading: #392d26;
  --spoiler-transition: 0.3s all;
  --spoiler-arrow-transform: rotate(0deg);
  box-sizing: border-box;
  transition: var(--spoiler-transition);
    color: rgba(var(--color-0), 1);
}

[data-spoiler="active"] {
  --spoiler-container-rows: 1fr;
  --spoiler-container-opacity: 1;
  --spoiler-container-maring: 0;
  --spoiler-container-padding: 16px;
  /* --spoiler-arrow-transform: rotate(90deg); */
}

.spoiler__heading {
  background: var(--spoiler-bgc-heading);
  transition: var(--spoiler-transition);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 16px;
  line-height: 1.1;
  min-height: 54px;
  box-sizing: border-box;
}

[data-spoiler-trigger] {
  cursor: pointer;
}

.spoiler__arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
  color: rgba(var(--color-0), 1);
  margin-left: auto;
  transition: var(--spoiler-transition);
  transform: var(--spoiler-arrow-transform);
}

.spoiler__arrow:after {
  content: "↶";
  display: inline-block;
  font-family: var(--font-ico);
  font-size: 16px;
  position: relative;
  z-index: 0;
}

.spoiler__content {
  display: grid;
}

.spoiler__title {
  color: rgba(var(--color-0), 1);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;

  @media (--v8) {
    font-size: 16px;
  }
}

.spoiler__container {
  margin: var(--spoiler-container-maring);
  padding: var(--spoiler-container-padding);
  display: grid;
  grid-template-rows: var(--spoiler-container-rows);
  overflow: hidden;
  opacity: var(--spoiler-container-opacity);
  transition: var(--spoiler-transition);
  box-sizing: border-box;
  background: #29241f;
}

.spoiler__content {
  min-height: 0;
  font-size: 14px;
  line-height: 1.4;

  @media (--v8) {
    font-size: 16px;
  }
}

/* spoiler-list */

.spoiler-list {
  display: grid;
  gap: 8px;
}

/* spoiler native javasript */
document.addEventListener("DOMContentLoaded", function () {
    document.addEventListener('click', function (e) {
        const triggerElement = e.target.closest("[data-spoiler-trigger]");

        if (!triggerElement) return;

        const targetElement = e.target.closest('button');
        if (targetElement) return;  // Останавливаем выполнение, если клик был по кнопке

        const box = triggerElement.closest("[data-spoiler]");

        if (box.getAttribute('data-spoiler') === 'active') {
            box.setAttribute('data-spoiler', '');
        } else {
            const accordion = box.closest('[data-spoiler-list="accordion"]');
            if (accordion) {
                const activeSpoilers = accordion.querySelectorAll('[data-spoiler="active"]');
                activeSpoilers.forEach(function (activeBox) {
                    activeBox.setAttribute('data-spoiler', '');
                });
            }
            box.setAttribute('data-spoiler', 'active');
        }

        document.dispatchEvent(new Event("trigger-spoiler"));
    });
});


/* spoiler jquery */
/*
document.addEventListener("DOMContentLoaded", function (event) {
    $(document).on('click', "[data-spoiler-trigger]", function (e) {
        const __this = $(this);
        const __target = $(e.target);

        if (__target.closest('button').length > 0) return;

        let box = __this.closest("[data-spoiler]");
        if (box.attr('data-spoiler') === 'active') {
            box.attr('data-spoiler', '');
        } else {
            box.closest('[data-spoiler-list="accordion"]').find('[data-spoiler="active"]').attr('data-spoiler', '');
            box.attr('data-spoiler', 'active');
        }
        document.dispatchEvent(new Event("trigger-spoiler"));
    });
});

*/