Как сделать кнопку «Далее», самый простой способ — HRCode
Верстка элементов

Как сделать кнопку «Далее», самый простой способ

Не всегда полное отображение информации является лучшим вариантом, иногда будет намного удобней для читателя или посетителя сайта, если на ресурсе будет сначала виден анонс статьи или какого то текста, а уже потом при желании его можно было раскрыть полностью и прочесть нужную информацию.
Сделать это можно с помощью нескольких строк HTML кода и небольшого скрипта. Ниже мы разберем один из простых вариантов, как сделать кнопку «Далее» в тексте.

В данном примере будет показан код, который нужен только для работы скрипта, весь код, который нужен для визуального оформления вы можете добавить сами.
Нам нужна будет HTML разметка текста, таблица стилей и скрипт на jQuery для работы нашей формы.

Допустим у вас есть большой текст, который вы хотите скрыть и показывать его только по нажатию на кнопку. Для этого нужно правильно расставить нужные теги в этом тексте.

html

<p>Текст, который сразу видно<span id="dots">...</span><span id="more"> Текст, который открывается после нажатия кнопки</span></p> 

<span id="more-btn">Показать весь список</span>

Первым делом определяете место в тексте, которое будет скрываться и заключаете этот участок кода в тег span с id more.
Далее, если вы хотите как то украсить окончание сокращенного текста, например многоточием, нужно в этом месте добавить тег span с id dots и внутри вставить многоточие.
Последним штрихом в нашей разметке будет кнопка по нажатию на которую будет показываться или скрываться весь текст. Оформить ее можно также в теге span с id more-btn. Внутри нужно будет написать какой то текст, чтобы читателям было понятно, для чего нужна эта кнопка.

Далее перейдем к стилям.

css

#more {
  display: none;
}
#more-btn {
  cursor: pointer;  
}
 

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

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

jQuery

$(function() {
  let dots = $(this).find("#dots");
  let more = $(this).find("#more");
  let moreBtn = $(this).find("#more-btn");
  
  moreBtn.click(function() {
    dots.toggle();
    more.toggle();
    moreBtn.text(moreBtn.text() == "Скрыть" ? "Показать весь список" : "Скрыть");
    });
});

Сначала скрипту нужно указать наши идентификаторы через переменные, чтобы он смог с ними работать.
Затем даем инструкцию, которую нужно выполнить по нажатию на кнопку «Далее». В данном примере мы указываем, что если элементы с идентификаторами dots, more видны, нужно скрыть и наоборот, если они скрыты, то их показать.
И изменяем текст на нашей кнопке, если отображается текст «Скрыть», то отобразить «Показать весь список», иначе показать «Скрыть».

Как видно все достаточно просто и так вы сможете сделать страницы на сайте более читабельны для пользователя.

Еще по теме:

Напишите что нибудь:

Ваш адрес email не будет опубликован. Обязательные поля помечены *