Иногда требуется срыть часть текста на сайте не только ради оптимизации места на сайте, но и для правильной СЕО оптимизации. В данном уроке мы хотим показать замечательный способ, с помощью которого Вы сможете это реализовать. Речь пойдет о замечательном плагине jQuery, а именно moreContent.js. Кто не знает, то это jQuery плагин, который скрывает переполненные содержимым контейнер и создает кнопку-переключатель в конце его.

 

Посетитель нажимает на кнопку переключения, чтобы развернуть скрытый контент с плавным скольжением анимации скорость которой Вы устанавливаете сами. По умолчанию мы создали один контейнер, в который поместили текст для наполнения, плагин автоматически скрыл часть текста и установил кнопку для отображения полного текста, давайте просмотрим более детально.

Шаг 1. HTML

Для начала нам необходимо подключить скрипты к нашей станице, для этого размещаем следующий код в шапке страницы:

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

Теперь нам необходимо контейнер и присвоить наши параметры плагина через атрибуты HTML5:

  • data-height= «160»:  заданная высота элемента;
  • data-duration= «1000»:  установить продолжительность анимации;
  • data-btn= «Открыть»: задать текст кнопки переключения по умолчанию;
  • data-btn-active=»Закрыть»: комплект активной кнопкой текста;
  • data-btn-class=»btn-default»: кнопка изменить переключение класса.

С разметкой мы разобрались, теперь перейдем к следующему шагу, а именно стилям.

Шаг 2. CSS

Нам необходимо установить параметры CSS для кнопки, а также для слоев контейнера, выглядит это следующим образом:

Шаг 3. JS

Чтобы плагин делал свою работу нам необходимо его инициализировать, для этого добавляем следующий код к вашей странице:

Вы также можете установить параметры плагина через JS-объект:

Такой прием поможет оптимизировать Ваш сайт для поисковой оптимизации, а также сократить множество места у Вас на ресурсе.

Вот и все. Готово!

Читайте также: