Все для создания и продвижения сайтов

Верстка, программирование, SEO

Скрыть или показать элемент в jquery

19717

Есть множество способов для скрытия или показа элементов в jquery, но есть самый актуальный и простой.

Все вы должны прекрасно знать, чтобы скрыть элемент, достаточно добавать к нему стиль "display:none", а чтобы он показывался достаточно убрать это свойство или прописать "display: block",

Можно добавить эти стили через простую функцию jquery - css().

$("#myblock").css("display", "none"); // Для скрытия
$("#myblock").css("display", "block"); // Для показа

Но нам нужно, к примеру скрыть или показать элемент по клику, для этого используем функцию "click()"

Создадим кнопку, которая будет скрывать определённый блок.

<button id="button">Скрыть</button>
<div id="block">Этот элемент скроется</div>

И добавим скрипт на кнопку:

$('#button').click(function(){
  $("#block").css("display", "none");
});

Теперь при нажатии на кнопку, блок исчезнет.

Давайте рассмотрим пример для показа элемента по клику.

Мы создадим блок, которые изначально скроем.

<button id="button">Скрыть</button>
<div id="block" style="display: none">Этот элемент появится</div>

И аналогично напишем скрипт:

$('#button').click(function(){
  $("#block").css("display", "block");
});
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.