Показать скрытый текст на JS
Сегодня мы научимся показывать и скрывать текст, при клике по кнопке, на чистом JavaScript. Такой прием обычно используют на сайтах, с целью экономии места, когда публикуют только часть информации и кнопку. При клике по кнопке, раскрывается остальная часть.
Демонстрация примера
HTML структура
Внутри тега p, поместим текст, разделим текст на две части, между ними поставим три точки, которые обернем в тег span с идентификатором dots. Вторую часть текста, так же обернем в тег span с идентификатором more. Ниже создадим кнопку и повесим на нее событие клика, при котором будет выполняться функция с названием showMore.
<p>
Повседневная практика показывает, что консультация с широким активом способствует подготовки <span id="dots">...</span><span id="more"> и реализации существенных финансовых и административных условий. </span>
</p>
<button onclick="showMore()" id="btn">Показать больше</button>
CSS код
Изначально скроем вторую часть текста с идентификатором more.
#more {
diplay: none;
}
На данный момент мы видим только первую половину текста, троеточие и кнопку. Далее запрограммируем нашу кнопку на JS.
JS код
Создадим функцию, с названием showMore, внутри функции объявим три переменные, которые будут получать элементы по названиям идентификаторов.
function showMore() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("btn");
Теперь нам надо сделать проверку, видимы ли точки? Если невидимы (display находится в состоянии none. ), то показываем точки, меняя значение none на inline, а текст в переменной moreText скрываем. На кнопке прописываем текст: "Показать больше".
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Показать больше";
moreText.style.display = "none";
}
На данный момент у нас вторая часть текста скрыта. Напишем вторую часть условия, что делать, в противном случае. Делаем все с точностью наоборот, точки скрываем, а текст показываем.
else {
dots.style.display = "none";
btnText.innerHTML = "Показать меньше";
moreText.style.display = "inline";
}
}
Условный оператор if-else, работает по принципу: или так / или сяк, одно из условий должно выполняться.
Добавим ещё CSS стилей для красоты
body {
font-family: Tahoma;
}
div {
background: #f2eaea;
margin: 0 auto;
max-width: 600px;
padding: 20px;
}
#btn {
background: #2196F3;
border: none;
font-size: 18px;
font-weight: bold;
color: white;
padding: 10px;
text-transform: uppercase;
}
Если хотите научиться создавать на нативном JavaScript больше интерактивных компонентов, то Вам в помощь, этот замечательный видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру".
-
Создано 05.06.2019 10:08:22
-
Михаил Русаков
Комментарии (1):
Здравствуйте Михаил. Подскажите пожалуйста как мне скрыть половина текста с МАРКОЙ АВТО? https://doskavsem.ru/board/avtomobili/legkovye-avtomobili-618.html
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.