InkSpoiler Demo

Без стилей

Это пример внешнего вида без стилей, последущие примеры показаны с использованием bootstrap. Для своих нужд вы можете стилизовать спойлеры как вам угодно.

Спойлер
Контент

Стандарт


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

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

Открытый спойлер


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

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

Замена текста


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

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

Свой ID


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

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

Вложенный спойлер


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

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

Аккордеон


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

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

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

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

Отключение доступности (Accessibility)


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

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

Отключение анимации


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

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

Методы

Открытие / Закрытие


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

    document.querySelector('.js-method-open').addEventListener('click', function (event) {
      spoilerMethod.open();
    });

    document.querySelector('.js-method-close').addEventListener('click', function (event) {
      spoilerMethod.close();
    });
  });
</script>

<button type="button" class="js-method-open">Открыть</button>
<button type="button" class="js-method-close">Закрыть</button>

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

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const spoilerMethod2 = new InkSpoiler('.js-spoiler-method-2');
    const spoilersMethod2Open = document.querySelectorAll('.js-method-open-2');
    const spoilersMethod2Close = document.querySelectorAll('.js-method-close-2');

    spoilersMethod2Open.forEach(el => {
      el.addEventListener('click', function (event) {
        const spoiler = document.querySelector(event.currentTarget.getAttribute('href'));
        spoilerMethod2.open(spoiler);
      });
    });

    spoilersMethod2Close.forEach(el => {
      el.addEventListener('click', function (event) {
        const spoiler = document.querySelector(event.currentTarget.getAttribute('href'));
        spoilerMethod2.close(spoiler);
      });
    });
  });
</script>

<a href="#spoilerMethod_1" class="js-method-open-2">Открыть спойлер 1</a>
<a href="#spoilerMethod_1" class="js-method-close-2">Закрыть спойлер 2</a>
<a href="#spoilerMethod_2" class="js-method-open-2">Открыть спойлер 2</a>
<a href="#spoilerMethod_2" class="js-method-close-2">Закрыть спойлер 2</a>

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

<div class="ink-spoiler">
  <div id="spoilerMethod_2" class="ink-spoiler__panel js-spoiler-method-2" data-spoiler-state="hide">
    <div class="ink-spoiler__text">Спойлер</div>
  </div>
  <div class="ink-spoiler__content border-bottom">Контент</div>
</div>
Открыть спойлер 1 Закрыть спойлер 1 Открыть спойлер 2 Закрыть спойлер 2
Спойлер 1
Контент 1
Спойлер 2
Контент 2

Событие


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

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