Содержание страницы
домикГлавная / Скрипты java и php / JS display none | block
display noneВ этой статье речь пойдёт о параметре display и будут показаны примеры, как с помощью JS назначить любому элементу значение block | none, то есть при клике сделать блок видимым или скрыть его.
Для этого я пропишу совсем маленький код JS, который и будет добавлять, либо удалять необходимые записи в css, где в итоге у меня будет осуществляться задуманное.

Пример 1.

Это самый простой из примеров, в котором через JS мы добавим элементу при клике display: block.

При клике текст появляется.

css, html, jsCOPY
<style> .oml{ margin: 0; padding: 0; display: none; } </style> <p class="oml">При клике текст появляется.</p> <button class="sizi">Отобразить блок</button> <script> var sizi = document.querySelector('.sizi') sizi.onclick = function(){ document.querySelector('.oml').style.display = 'block'; sizi.onclick = null; }; </script>

Пример 2.

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

Плавное появление текста при клике.

css, html, jsCOPY
<style> .oml2{ margin: 0; padding: 0; display: none; opacity: 0; } </style> <p class="oml2">Плавное появление текста при клике.</p> <button class="seze">Отобразить блок</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $('.seze').click(function(){ $(".oml2").css({display:'block'}).animate({opacity:'1'}, 1400) }); </script>

Пример 3.

Экспериментируем далее и повесим на клик по кнопке сразу 2 функции: добавим нужному элементу display: block и тем самым отобразим его на странице, и удалим кнопку присвоив ей display: none.

При клике текст плавно появляется и кнопка исчезает.

css, html, jsCOPY
<style> .oml3{ margin: 0; padding: 0; display: none; opacity: 0; } </style> <p class="oml3">При клике текст плавно появляется и кнопка исчезает.</p> <button class="suzu">Отобразить блок</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $('.suzu').click(function(){ $(".oml3").css({display:'block'}).animate({opacity:'1'}, 1400); $(".suzu").css({display:'none'}).animate({opacity:'0'}, 1400) }); </script>

Пример 4.

И последнее, мы с помощью клика сможем как отобразить элемент, так и его скрыть. Данный пример можно смело применить для скрытого текста.

При кликах текст плавно со сдвигом появляется и исчезает, и меняется текст в кнопке.

css, html, jsCOPY
<style> .oml4{ margin: 0; padding: 0; display: none; } </style> <p class="oml4">При кликах текст плавно со сдвигом появляется и исчезает, и меняется текст в кнопке.</p> <button class="sozo">Отобразить блок</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $('.sozo').click(function(){ if ( document.querySelector('.oml4').style.display == "block" ) { $(".oml4").slideUp('slow'); $('.sozo').text('Отобразить блок'); } else{ $(".oml4").slideDown('slow'); $('.sozo').text('Скрыть блок'); } }); </script>
Изначально текст имеет статус display: none, после клика его значение меняется на display: block и так далее на постоянной основе.
Дата публикации: 22.04.2019
Комментарии
Екатерина
25 февраля 2020 15:57
Екатерина
Большое спасибо за примеры display: block и display: none! Вы мне очень помогли!
Я два дня искала эту функцию. Благодарю! Благодарю! Благодарю! Процветания вашему сайту!

Подскажите пожалуйста, какой код нужно добавить в пример 3, чтобы каждые последующие блоки со скрытым текстом не раскрывались все сразу, а только по нажатию.
Admin
26 февраля 2020 23:57
Admin
Екатерина, всё очень просто: копируете этот вариант необходимое количество раз, и в каждом последующем изменяете class и в JS то же.
Вот пример для двух блоков с display: block и display: none
css, html, jsCOPY
<style> .oml3, .oml4{ margin: 0; padding: 0; display: none; opacity: 0; } </style> <p class="oml3">При клике текст плавно появляется и кнопка исчезает.</p> <button class="suzu">Отобразить блок</button> <br><br> <p class="oml4">При клике текст плавно появляется и кнопка исчезает.</p> <button class="suzu_2">Отобразить блок</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $('.suzu').click(function(){ $(".oml3").css({display:'block'}).animate({opacity:'1'}, 1400); $(".suzu").css({display:'none'}).animate({opacity:'0'}, 1400) }); $('.suzu_2').click(function(){ $(".oml4").css({display:'block'}).animate({opacity:'1'}, 1400); $(".suzu_2").css({display:'none'}).animate({opacity:'0'}, 1400) }); </script>
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!