Не всегда полное отображение информации является лучшим вариантом, иногда будет намного удобней для читателя или посетителя сайта, если на ресурсе будет сначала виден анонс статьи или какого то текста, а уже потом при желании его можно было раскрыть полностью и прочесть нужную информацию.
Сделать это можно с помощью нескольких строк HTML кода и небольшого скрипта. Ниже мы разберем один из простых вариантов, как сделать кнопку "Далее" в тексте.
В данном примере будет показан код, который нужен только для работы скрипта, весь код, который нужен для визуального оформления вы можете добавить сами.
Нам нужна будет HTML разметка текста, таблица стилей и скрипт на jQuery для работы нашей формы.
Допустим у вас есть большой текст, который вы хотите скрыть и показывать его только по нажатию на кнопку. Для этого нужно правильно расставить нужные теги в этом тексте.
<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. Внутри нужно будет написать какой то текст, чтобы читателям было понятно, для чего нужна эта кнопка.
Далее перейдем к стилям.
#more {
display: none;
}
#more-btn {
cursor: pointer;
}
Здесь из функционала нужно только скрыть текст, который будет показываться или скрываться по нажатию на кнопку "Далее". Все остальные стили можно добавить для визуального оформления текста и кнопки, например сделать, чтобы при наведении на нее указателя, показывался курсор в виде руки.
В заключении нужно оформить скрипт, который и будет творить всю магию в этом примере. Сам скрипт достаточно простой, но функциональный.
$(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 видны, нужно скрыть и наоборот, если они скрыты, то их показать.
И изменяем текст на нашей кнопке, если отображается текст "Скрыть", то отобразить "Показать весь список", иначе показать "Скрыть".
Как видно все достаточно просто и так вы сможете сделать страницы на сайте более читабельны для пользователя.
Kwork