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 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