javascript показать скрыть div

Вот такой будет у нас стандартный код на HTML:

Результат будет вот таким:

средствами HTML , CSS, JS и Bootstrap» w />

Теперь скроем блок №1 – « Здравствуйте, это мой блок №1 ».

Как скрыть элемент блока на сайте – HTML5

HTML5 очень функционален и в нем есть много дополнительных тегов и атрибутов, которые упрощают жизнь создателям сайтов. Одним из таких атрибутов является « hidden ».
Атрибут « hidden » сделает блок

Результат будет вот таким:

Как видите, блок №1 спрятался и остался только блок №2 , так как я не прописал к нему тег

Как скрыть элемент блока на сайте – CSS

В CSS есть несколько способов, чтобы скрыть элемент

Теперь в CSS пропишите вот такой стиль:

Блок с классом « blok1 » исчезнет:

Можно скрыть блок, используя прозрачность « opacity »:

Можно скрыть блок, используя «visibility» со значением «hidden» :

Как скрыть элемент блока на сайте – JavaScript

Вы наверное такого нигде не видели, может этого никто и не использует, но этот способ работает и очень таки не плохо. Вставить код JavaScript нужно в самом низу веб страницы, то есть после :

blok1 – это класс

Можно и вот таким способом:

Тогда код будет вот таким:

Можно и вот таким способом:

Как скрыть элемент блока на сайте для мелких экранов – BootStrap3

Если вам нужно спрятать большую картинку или блок

Мобильные устройства ( 1200px) — .visible-lg, .hidden-lg

Например, скроем блок для маленьких устройств:

Вот и все. Надеюсь статья была вам очень полезная.

Простейшее решение, позволяющее показать/скрыть HTML-элемент документа, используя JavaScript. Подробно описание сути процесса и его особенностей.

Обычными средствами срыть (англ. hide) или показать (англ. show) HTML-элемент документа не представляется возможным. Для этого используется CSS-свойство display или visibility. Отличие между ними состоит в том, что visibility, хоть и делает HTML-элемент невидимым, но место, которое он занимает, остаётся за ним. Понятно, что гораздо чаще используется именно display.

display (с англ. отображение) – многоцелевое свойство, которое определяет, как элемент должен отображаться в документе.

Список возможных значений CSS-свойства display, понимаемых различными браузерами, не велик, но и этого вполне достаточно.

• block — элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега SPAN , заставляет его вести подобно блокам, т.е. происходит перенос строк в начале и конце содержимого.
• inline — элемент отображается как встроенный. Применение этого значения для блочных элементов, например тега DIV , заставляет его вести подобно встроенным, т.е. его содержимое будет начинаться с того места, где окончился предыдущий элемент.
• list-item — элемент выводится как блочный и добавляется маркер списка.
• none — скрывает элемент в документе. Занимаемое им место не резервируется и web-страница формируется так, словно элемента и не было.

Понятно, что для того, чтобы изменить CSS-свойство того или иного HTML-элемента необходимо использовать скриптовый язык программирования. В нашем случае это JavaScript. Но всё по порядку.

Первым делом надо определиться, как именно обратиться к HTML-элементу документа. Для этого можно воспользоваться методом getElemetById объекта document , который возвращает ссылку на HTML-элемент документа по значению атрибута id . Например:

Теперь нам нужно получить доступ к свойствам стиля соответствующего HTML-элемента. Для этого используется свойство style . Например:

Остаётся лишь создать элемент управления, который бы выполнял смену значения CSS-свойства display, по какому либо событию, например onclick (клик мышью). Здесь стоит обратить внимание на тот факт, что для решения поставленной задачи, понадобится проверять текущее значение CSS-свойства display и менять его на «противоположное». В нашем случае, для скрытия, будем использовать значение none, а для отображения «пусто». Во втором случае мы убираем CSS-свойство display в соответствующем элементе, что позволит корректно работать как с блочными так и встраиваемыми HTML-элементами.

Для наглядности приведу следующий пример:

Обратите внимание, что тег DIV имеет атрибут style со значением display:none . Таким образом? мы задаём значение CSS-свойства display по умолчанию равное none, т.е. HTML-элемент изначально будет скрыт.

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

Обычно показываются, и скрываются html тег div, но не обязательно, можно манипулировать любыми элементами.
Изменение видимости элемента достигается за счет изменения css-свойства display. Если display = ‘block’, то элемент будет видим, если ‘none’, то скрыт.

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

Вот исходный код примера, с подробным описанием:

Комментарий:
Огромное спасибо))

Комментарий:
спосибоооооооооооооооооооооооооооооооооооооооооооооо

Комментарий:
СПасибо!

Комментарий:
Спасибо, мне очень помог данный пример