InkSpoiler Demo

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const spoilers = new InkSpoiler('.js-spoiler');
  });
</script>

<div class="spoiler">
  <div class="spoiler__panel js-spoiler" data-spoiler-state="hide">
    <div class="spoiler__text">Спойлер</div>
  </div>
  <div class="spoiler__content">Контент</div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const spoilers = new InkSpoiler('.js-spoiler');
  });
</script>

<div class="spoiler">
  <div class="spoiler__panel js-spoiler" data-spoiler-state="show">
    <div class="spoiler__text">Спойлер</div>
  </div>
  <div class="spoiler__content">Контент</div>
</div>
				

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const spoilers = new InkSpoiler('.js-spoiler');
  });
</script>

<div class="spoiler">
  <div class="spoiler__panel js-spoiler" data-spoiler-state="hide" data-spoiler-text="Закрыть 1">
    <div class="spoiler__text">Открыть 1</div>
  </div>
  <div class="spoiler__content">Контент</div>
</div>
<div class="spoiler">
  <div class="spoiler__panel js-spoiler" data-spoiler-state="show" data-spoiler-text="Закрыть 2">
    <div class="spoiler__text">Открыть 2</div>
  </div>
  <div class="spoiler__content">Контент</div>
</div>
				

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const spoilers = new InkSpoiler('.js-spoiler');
  });
</script>

<div class="spoiler">
  <div class="spoiler__panel js-spoiler" data-spoiler-state="hide" data-spoiler-target="#my-custom-id">
    <div class="spoiler__text">Спойлер</div>
  </div>
  <div class="spoiler__content border-bottom">Контент</div>
</div>
				

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const spoilers = new InkSpoiler('.js-spoiler');
  });
</script>

<div class="spoiler">
  <div class="spoiler__panel js-spoiler" data-spoiler-state="hide">
    <div class="spoiler__text">Спойлер 1</div>
  </div>
  <div class="spoiler__content">
    Контент
    <div class="spoiler">
      <div class="spoiler__panel js-spoiler" data-spoiler-state="hide">
        <div class="spoiler__text">Спойлер 2</div>
      </div>
      <div class="spoiler__content">Контент</div>
    </div>
  </div>
</div>
				

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const spoilers = new InkSpoiler('.js-spoiler');
  });
</script>

<div class="spoiler">
  <div class="spoiler__panel js-spoiler" data-spoiler-state="show" data-spoiler-group="A">
    <div class="spoiler__text">Группа A</div>
  </div>
  <div class="spoiler__content">Контент</div>
</div>
<div class="spoiler">
  <div class="spoiler__panel js-spoiler" data-spoiler-state="hide" data-spoiler-group="A">
    <div class="spoiler__text">Группа A</div>
  </div>
  <div class="spoiler__content">Контент</div>
</div>
<div class="spoiler">
  <div class="spoiler__panel js-spoiler" data-spoiler-state="hide" data-spoiler-group="A">
    <div class="spoiler__text">Группа A</div>
  </div>
  <div class="spoiler__content">Контент</div>
</div>
				

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const spoilers = new InkSpoiler('.js-spoiler');
  });
</script>

<div class="spoiler">
  <div class="spoiler__panel js-spoiler" data-spoiler-state="hide" data-spoiler-group="B">
    <div class="spoiler__text">Группа B</div>
  </div>
  <div class="spoiler__content">Контент</div>
</div>
<div class="spoiler">
  <div class="spoiler__panel js-spoiler" data-spoiler-state="hide" data-spoiler-group="B">
    <div class="spoiler__text">Группа B</div>
  </div>
  <div class="spoiler__content">Контент</div>
</div>
<div class="spoiler">
  <div class="spoiler__panel js-spoiler" data-spoiler-state="hide" data-spoiler-group="B">
    <div class="spoiler__text">Группа B</div>
  </div>
  <div class="spoiler__content">Контент</div>
</div>
				

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const spoilers = new InkSpoiler('.js-spoiler-a11y', {
      ally: false
    });
  });
</script>

<div class="spoiler">
  <div class="spoiler__panel js-spoiler-a11y" data-spoiler-state="hide">
    <div class="spoiler__text">Спойлер</div>
  </div>
  <div class="spoiler__content border-bottom">Контент</div>
</div>
				

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const spoilers = new InkSpoiler('.js-spoiler-animation', {
      animation: false
    });
  });
</script>

<div class="spoiler">
  <div class="spoiler__panel js-spoiler-animation" data-spoiler-state="hide">
    <div class="spoiler__text">Спойлер</div>
  </div>
  <div class="spoiler__content border-bottom">Контент</div>
</div>
				

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const spoilers = new InkSpoiler('.js-spoiler-duration', {
      animation: true,
      duration: 2000
    });
  });
</script>

<div class="spoiler">
  <div class="spoiler__panel js-spoiler-duration" data-spoiler-state="hide">
    <div class="spoiler__text">Спойлер</div>
  </div>
  <div class="spoiler__content border-bottom">Контент</div>
</div>
				

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const spoilerEvents = new InkSpoiler('.js-spoiler-events', {
      changeBeforeOpening: (spoilerEvents) => {
        console.log('changeBeforeOpening');
      },
      changeAfterOpening: (spoilerEvents) => {
        console.log('changeAfterOpening');
      },
      changeBeforeClosing: (spoilerEvents) => {
        console.log('changeBeforeClosing');
      },
      changeAfterClosing: (spoilerEvents) => {
        console.log('changeAfterClosing');
      }
    });
  });
</script>

<div class="spoiler">
  <div class="spoiler__panel js-spoiler-events" data-spoiler-state="hide">
    <div class="spoiler__text">Спойлер</div>
  </div>
  <div class="spoiler__content border-bottom">Контент</div>
</div>