Пишемо плагін для перемикання матеріалів сайту

Сьогодні ми робимо цікаву функцію для сайту. Якщо сайт відкривають на великому моніторі, то стаття відображається повністю. Але коли розмів монітору меньший ніж вказанний, то показується лише частина матеріалу, та з'являються кнопки керування. Кнопки дозволяють перемикати частини статті. При натисканні на ці кнопки ми переходимо до наступної, або попередньої частини тексту.

Почнемо з HTML. Ось така розмітка, матеріал у section буде перемикатися кнопками. У section можно розмістити будь-які елементи.

<article>
  <header>
    <h1>Скорпион</h1>
  </header>
  <img src="" alt="">
  <section class="">
    <h2>Описание</h2>
    <p></p>
  </section>
  <section class="hide-section">
    <h2>Биография Ханзо
    Хасаши</h2>
    <p></p>
  </section>
  <section class="hide-section">
    <h2>Причина вражды
    между Скорпионом и
    Куан Чи</h2>
    <p></p>
  </section>
  <footer class="button-footer">
  <button class="left">Left</button>
  <button class="right">Right</button>
  </footer>
</article>

Тепер за допомогою CSS приховаємо footer, та створимо клас для приховування section.

.button-footer {
  display: none;
}

button {
  font-size: 40px;
  padding: 20px;
}

@media screen and (max-width: 800px) {
  .button-footer {
    display: block;
  }
  .hide-section {
    display: none;
  }
}

Тепер - JavaScript. На кнопки додамо функції і створимо додаткові змінні – hash, section.

document.querySelector('.left').addEventListener('click', articleLeft);
document.querySelector('.right').addEventListener('click', articleRight);

let section = document.querySelectorAll('article section');
let sectionCount = section.length; // !!!
let hash = 0; // //#
if (window.location.hash) {
  hash = window.location.hash; //#2
  hash = +hash.replace('#', '');
  showSection();
}

При завантаженні сторінки будемо перевіряти чи існує hash. Також будемо виконувати функцію showSection.

Функція буде приховувати усі section, окрім той, що активна. А яка активна - ми будемо розуміти за допомогою hash.

function articleLeft() {
  if (hash - 1 >= 0) {
    hash--;
  }
  else {
    hash = sectionCount - 1;
  }
  window.location.hash = hash;
  showSection();
}

function articleRight() {
  if (hash + 1 < sectionCount) {
    hash++;
  }
  else {
    hash = 0;
  }
  window.location.hash = hash;
  showSection();
}

function showSection() {
  section.forEach(elem => {
    elem.classList.add('hide-section');
  });
  section[hash].classList.remove('hide-section');
}

Допишемо функції для кнопок переходу до наступної та попередньої section. Уважно слідкуйте як ми змінюємо hash, після чого виконуємо функцію showSection.

See the Pen Плагiн для статьи сайта by Alex (@Asmodey) on CodePen.