Пишем плагин переключения статей на мобильном

Сегодня мы делаем интересную функцию. Материалы статьи – на экранах больших определенного размера показывается полностью. Но если экран меньше размера, то показывается только часть статьи (section) и появляются кнопки переключения – вправо, влево. При нажатии на эти кнопки листается статья по частям.

Начнем с разметки. Вот так мы делаем 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, кроме той, которая активна. Активную 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');
}

Осталось дописать функции переключения влево, вправо. Здесь основная сложность – следить за тем, чтобы правильно увеличивать или уменьшать hash. После этого – запускаем функцию showSection.

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