Показать и скрыть элемент на JS
На этом уроке вы узнаете, как на языке JavaScript показать и скрыть любой элемент на сайте, кликнув по кнопке.
HTML структура
В HTML разметке присутствует кнопка, имеющая начальное положение "Показать элемент" и скрытый текстовый блок. При клике по кнопке, блок с текстом показывается. При повторном клике по кнопке, данный блок скрывается. Зададим текстовому блоку класс content, отвечающий за оформление и класс hidden. Из названия последнего понятно, что этот класс скрывает контент, пока пользователь не сделает клик по кнопке.
<button class="btn" type="button">
Показать элемент
</button>
<div class="content hidden">
Товарищи! постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации дальнейших направлений развития. Повседневная практика показывает, что реализация намеченных плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании новых предложений.
</div>
CSS код
Разукрасим нашу кнопку линейным градиентом и установим легкую тень.
.btn{
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px 0;
border: solid 1px #004F72;
border-radius: 4px;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
color: #E5FFFF;
background-color: #3BA4C7;
background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
outline: none;
}
.content {
margin-top: 20px;
padding: 20px;
border: solid 1px rgb(214, 218, 219);
border-radius: 4px;
font-family: Calibri, 'Trebuchet MS', sans-serif;
}
.hidden {
display: none; // скрывает текст
}
JavaScript код
По событию клика по кнопке, у текстового блока должен удалиться класс hidden и тогда блок перестанет быть скрытым. Повторный же клик по кнопке наоборот вешает класс hidden на контентный блок, тем самым скрывая его. Как видите, весь механизм завязан на классе hidden.
Создадим две переменные, которым присвоим кнопку и блок по названиям селекторов. Затем будем отлавливаем событие клика по кнопке с помощью обработчика событий addEventListener. Первым параметром мы передаем событие клика, а вторым параметром название функции btnClick, в которой описываем действия, которые должны произойти после клика по кнопке. Первым делом необходимо найти класс hidden и при помощи метода toggle (переключатель) добавлять класс hidden, если его нет и удалять, если он есть. Кроме того на кнопке должны меняться надписи "Показать элемент / Скрыть элемент". Для этого обратимся к свойству кнопки textContent и создадим условие if-else. Если в блоке с классом content содержится и класс hidden, то поменять на кнопке надпись на "Скрыть элемент". В противном случае оставить, как было "Показать элемент".
const btn = document.querySelector(".btn");
const content = document.querySelector(".content");
btn.addEventListener("click", btnClick);
function btnClick() {
console.log(content.classList);
if (content.classList.contains("hidden")) {
btn.textContent = "Скрыть элемент";
} else {
btn.textContent = "Показать элемент";
}
content.classList.toggle("hidden");
}
-
Создано 17.04.2020 10:32:13
-
Михаил Русаков
Комментарии (5):
Замечательная технология показа текста, если интересуют подробности посетителя. Кроме того, возможно и картинки так вставлять в эти тексты. Вот вопрос, а не мешает это поисковому роботу производить индексацию? И если есть в тексте ссылки, как осуществляется переход на них? Спасибо за предоставленную возможность задавать вопросы.
Ответить
Скрытый текст от глаз пользователя, прекрасно виден роботам, ведь он по факту есть в html разметке, ровно как и ссылки.
Ответить
Спасибо. А если на странице есть якорная ссылка и надо перейти на текст в этом спойлере? Как происходит визуально этот переход?
Ответить
без дополнения текущего JavaScript не сработает, надо отслеживать событие клика по ссылке.
Ответить
Здравствуйте, Подскажите, пожалуйста, как можно скрыть скрипт счётчика такого вида: <script src="....js" id="..." async defer></script> Это код <div style="display: none"> </div> не скрывает.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.