Переключаем части статьи на мобильном

Сегодня мы делаем интересную функцию. Материалы статьи – на экранах больших определенного размера показывается полностью. Но если экран меньше размера, то показывается только часть статьи ( 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.

Еще статьи

Следи за новостями курсов на нашем канале

Открыть

Правила оформления домашних заданий

Открыть

Форум по задачам

Forum