Код спойлера для AMP страниц

Дата05.07.2020

Image

Здравствуй, посетитель!

AMP страницы были придуманы для ускорения отображения страниц на мобильных устройствах. И их функционал несколько ограничен, а именно невозможно использовать сторонний JS код. Только одобренные библиотеки, жёстко регламентирующие тот или иной функционал. Оно и понятно, ведь если «нашпиговать» страницы собственным JS кодом и функционалом, то едва ли они покажут скоростное преимущество в сравнении с классическими страницами сайта.

Но из-за ограничения функционала появляются и сложности в реализации простых и понятных элементов. Ведь сторонний JS код на страницах не функционирует, а реализация того же спойлера (раскрывающегося элемента с изначально скрытым контентом) порой необходима на AMP страницах.

И такая возможность была предусмотрена разработчиками AMP технологии. Реализацию оной мы и рассмотрим далее.

Реализовываем спойлер на AMP страницах – рабочий код

Для его реализации необходимо в область Head добавить следующую строку:

<script async="async" custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

А вот как выглядит типовой код спойлера:

<div class="spoiler-amp">
<amp-accordion animate expand-single-section>
<section>
<h4 class="spoiler-button">Заголовок спойлера</h4>
<div class="spoiler-body">Тут располагается контент, который будет раскрыт \ вновь скрыт при нажатии</div>
</section>
</amp-accordion>
</div>

Количество спойлеров, которое может быть реализовано на конкретной AMP странице, совершенно ничем не ограниченно.

Естественно, спойлеру можно придать уникальный дизайн, сменяющийся заголовок при раскрытии \ вновь скрытии посредством CSS и т.д. Тут уже всё делается на усмотрение вашей фантазии, благо какие-либо CSS ограничения на AMP страницах отсутствуют.

Единственное, заголовок должен быть с тегом <h1> — <h6>, иначе код AMP будет не валиден (не будет соответствовать всем установленным правилам реализации AMP страниц и конкретным функциональным возможностям на них).

По данной ссылке можно посмотреть пример спойлера, реализованного приведённым выше кодом на AMP странице.

Да, после реализации спойлера и встраивания его в AMP страницы, не забудьте проверить код на корректность. Дабы узнать, как это можно сделать быстро, обратитесь к материалу под названием «Как проверить на корректность AMP код страниц, выявить ошибки и исправить».

Благодаря приведённому решению можно быстро реализовать желаемое количество блоков с изначально скрытой информацией на AMP страницах и решить тем самым вопрос нагромождения информации на страницах, скрыв избыточную, которая будет отображаться по клику.

Поделиться ➞
Пожертвование сайту WPuse.ru (cбор пожертвований осуществляется через сервис «ЮMoney»)
Читайте также: