How to hide or show a div in HTML?

In this article we will learn the ways to hide or show a div in HTML – using JavaScript with events or CSS rules.

What’s up programmers? Let’s learn more about HTML, CSS and JS!

There are two widely used ways to hide and show HTML <divs>:

CSS Rules;
Handling an event by styling the div;

Ultimately even the way through JavaScript, it becomes a CSS styling application

Let’s see in practice the two possibilities

Hide/Show a div with CSS

The idea here is that we have a div in our HTML code, and we are going to apply a CSS rule to it to hide it.

For this we have to use the display property and the value none

See the code:

<div class="container">
 <p>This element is hidden!</p>
</div>

Notice the div with the container class is what we’re going to access and add the rule

See the necessary code:

.container {
 display: none;
}

So you will hide the div of your page, if you want to show it again, change none to block or delete this rule

Hide/Show a div with JavaScript

To change the style or display of the div with JavaScript, it is necessary to access the element via DOM (Document Object Model)

And change its display property to none or block, as we need

Let’s create a button to make the event:

<div class="container">
 <p>This element is hidden</p>
</div>
<button id='btn-div'>Hide/show div</button>

And our JavaScript code will look like this:

var btn = document.getElementById('btn-div');
var container = document.querySelector('.container');

btn.addEventListener('click', function() {
 if(container.style.display === 'block') {
  container.style.display = 'none';
 } else {
  container.style.display = 'block';
 }
});

Then we map the button in a variable and access the display property of the .container in the click event

If it is visible, it will be hidden and if it is visible, it will be displayed.

This way we can hide or show a div with JS