скрыть блок средствами HTML , CSS, JS и Bootstrap на BlogGood.ru

JavaScript — How to show and hide div by a button click

To display or hide a by a click, you can add the onclick event listener to the element.

The onclick listener for the button will have a function that will change the display attribute of the from the default value (which is block ) to none .

For example, suppose you have an HTML element as follows:

The element above is created to hide or show the element on click.

You need to add the onclick event listener to the element like this:

When you click the element again, the display attribute will be set back to block , so the will be rendered back in the HTML page.
Since this solution is using JavaScript API native to the browser, you don’t need to install any JavaScript libraries like jQuery.
You can add the JavaScript code to your HTML tag using the tag as follows:
Feel free to use and modify the code above in your project.
 
I hope this tutorial has been useful for you. 👍
 
Читайте также:  Теги физической разметки html
Learn JavaScript for Beginners 🔥
 
Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.
 
A practical and fun way to learn JavaScript and build an application using Node.js.
 
 
About
 
Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.
 
Search
 
Type the keyword below and hit enter
 
Tags
 
Click to see all tutorials tagged with:
 
Источник
 
Как скрыть блок div средствами HTML, CSS, JS и Bootstrap
 
 
Сегодня я расскажу, как скрыть блок средствами HTML , CSS, JS и Bootstrap. Посчитал я, что, возможно, эта статья будет вам очень полезная по причине того, что вы не один раз будете сталкиваться с вопросом, как скрыть блок на сайте. 
На практике меня этот способ очень спасал, когда нужно было убрать какие-то элементы с сайта, которые не я делал. Да, можно поискать, в каких файлах этот блок есть и удалить вручную, но не всегда это эффективно, так как можно поломать весь php-цикл. Так вот, сегодня покажу как легко и быстро скрывать такие блоки.
 
Вот такой будет у нас стандартный код на HTML:
 
     
Здравствуйте, это мой блок №1.
 это мой блок №2 - BlogGood.ru 
 
Результат будет вот таким:
 
 
Теперь скроем блок №1 – « Здравствуйте, это мой блок №1 ».
 
Как скрыть элемент блока на сайте – HTML5
 
HTML5 очень функционален и в нем есть много дополнительных тегов и атрибутов, которые упрощают жизнь создателям сайтов. Одним из таких атрибутов является « hidden ». 
Атрибут « hidden » сделает блок невидимым. Для этого достаточно прописать в строке №6 к блоку атрибут « hidden »:
 
 это мой блок №2 - BlogGood.ru
 
Результат будет вот таким:
 
 
Как видите, блок №1 спрятался и остался только блок №2 , так как я не прописал к нему тег с атрибутом « hidden ».
 
Как скрыть элемент блока на сайте – CSS
 
В CSS есть несколько способов, чтобы скрыть элемент на сайте, например, используя « display ». 
Итак, создайте для блока class, например, «blok1» :
 
Здравствуйте, это мой блок №1.
 это мой блок №2 - BlogGood.ru
 
Теперь в CSS пропишите вот такой стиль:
 
Блок с классом « blok1 » исчезнет:
 
 
Можно скрыть блок, используя прозрачность « opacity »:
 
Можно скрыть блок, используя «visibility» со значением «hidden» :
 
Как скрыть элемент блока на сайте – JavaScript
 
Вы наверное такого нигде не видели, может этого никто и не использует, но этот способ работает и очень таки не плохо. Вставить код JavaScript нужно в самом низу веб страницы, то есть после :
 
  
 
Можно и вот таким способом:
 
  
 
Если прописать не « class », а « id »:
 
 
это мой блок №2 - BlogGood.ru
 
Тогда код будет вот таким:
 
  
 
Можно и вот таким способом:
 
  
 
Как скрыть элемент блока на сайте для мелких экранов – BootStrap3
 
Если вам нужно спрятать большую картинку или блок на маленьких устройствах (расширение экрана ниже 
 
 
Мобильные устройства ( <768px) — .visible-xs, .hidden-xs
Планшеты (768px — 992px) — .visible-sm, .hidden-sm 
Десктопы (992px — 1200px) — .visible-md, .hidden-md 
Большие экраны (>1200px) — .visible-lg, .hidden-lg
 
 
Например, скроем блок для маленьких устройств:
 
 
Здравствуйте, это мой блок №1.
 это мой блок №2 - BlogGood.ru
Вот и все. Надеюсь статья была вам очень полезная.
Источник
Using JavaScript to Show and Hide a Div
We can use JavaScript to show and hide a div using one button by combing the getElementById() method, the display property, and an if else conditional statement.
var displayStatus = document.getElementById("someDiv"); if ( displayStatus.style.display == 'none' ) < displayStatus.style.display = 'block'; >else
We can use JavaScript to show a div and hide a div, but to be able to toggle between the two, we can do so using the code above.
Let’s say we have the following html:
If we want to use JavaScript to show hide the div, we can do so by targeting the element’s display property. We do this simply by getting the id of the div and then changing its display property to “block” if it is hidden, or “none” if it is shown. We check this with an if-else conditional statement.
var displayStatus = document.getElementById("div1"); if ( displayStatus.style.display == 'none' ) < displayStatus.style.display = 'block'; >else
Note that we can also show/hide (or toggle) a div easily using jQuery with the toggle() method.
Using JavaScript to Show/Hide a Div With a Click
We can use JavaScript to show/hide a div very easily by combining the display property and an if-else conditional statement with an onclick event.
Let’s say that we have the following HTML where we want to give the user the ability to show and hide the div #div1. The div will just be a greenish box that will be shown to start.
In the JavaScript code, we will add an onclick event to a button that will run a function we will create. In the function, we will simply change the display property of the div to “block” if it is hidden, or “none” if it is shown.
Here is the JavaScript code:
The final code and output for this example of using JavaScript to show/hide a div with a click is below:
Источник
How to Hide Div in JavaScript?
To hide a div using JavaScript, get reference to the div element, and assign value of "none" to the element.style.display property.
Conclusion
In this JavaScript Tutorial, we learned how to hide a div using JavaScript.
Related Tutorials

How to Change Border Color of Div in JavaScript?
How to Change Border Radius of Div in JavaScript?
How to Change Border Style of Div in JavaScript?
How to Change Border Width of Div in JavaScript?
How to Change Bottom Border of Div in JavaScript?
How to Change Font Color of Div in JavaScript?
How to Change Font Family of Div in JavaScript?
How to Change Font Size of Div in JavaScript?
How to Change Font Weight of Div in JavaScript?
How to Change Height of Div in JavaScript?
How to Change Left Border of Div in JavaScript?
How to Change Margin of Div in JavaScript?
How to Change Opacity of Div in JavaScript?
How to Change Padding of Div in JavaScript?
How to Change Right Border of Div in JavaScript?
How to Change Text in Div to Bold in JavaScript?
How to Change Text in Div to Italic in JavaScript?
How to Change Top Border of Div in JavaScript?
How to Change Width of Div in JavaScript?
How to Change the Background Color of Div in JavaScript?
How to Change the Border of Div in JavaScript?
How to Clear Inline Style of Div in JavaScript?
How to Insert Element in Document after Specific Div Element using JavaScript?
How to Underline Text in Div in JavaScript?
How to get Attributes of Div Element in JavaScript?

Popular Courses by TutorialKart
Salesforce
SAP
Accounts
Database
Programming
App Developement
Mac/iOS
Apache
Web Development
Online Tools
©Copyright - TutorialKart 2023
Источник
Показать и скрыть элемент на JS

На этом уроке вы узнаете, как на языке JavaScript показать и скрыть любой элемент на сайте, кликнув по кнопке.
HTML структура
В HTML разметке присутствует кнопка, имеющая начальное положение "Показать элемент" и скрытый текстовый блок. При клике по кнопке, блок с текстом показывается. При повторном клике по кнопке, данный блок скрывается. Зададим текстовому блоку класс content, отвечающий за оформление и класс hidden. Из названия последнего понятно, что этот класс скрывает контент, пока пользователь не сделает клик по кнопке.
 
Показать элемент 
 
Товарищи! постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации дальнейших направлений развития. Повседневная практика показывает, что реализация намеченных плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании новых предложений. 

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");
function btnClick() console.log(content.classList);
if (content.classList.contains("hidden")) btn.textContent = "Скрыть элемент"; 
> else btn.textContent = "Показать элемент"; 
>
Демонстрация показа и скрытия элемента


Создано 17.04.2020 10:32:13
Михаил Русаков

Источник