How To Show/Hide A Div Element By Id Using Javascript

Show/hide a div element by id using javascript

With JavaScript, you can do many things with HTML elements. In this article, I will show you how to show/hide a div element by id using javascript.

Show/hide a div element by id using javascript

JavaScript provides two ways to show or hide a div element by its id. The first one is the display property, and the second one is the visibility property. I will show you both ways. Let’s see what’s the difference between these methods.

Before we start, to avoid confusion, check out my CSS file:

#example{
    width: 500px;
    height: 500px;
    background-image: url('./61ca497efc91881256158064_blog\ article.png');
    background-size: cover;
    margin-left: auto;
    margin-right: auto;
}

#mybtn1 {
    margin-top: 30px;
}

#mybtn2 {
    margin-top: 30px;
}

Method 1 – Use the style display property

Syntax:

object.style.display // get the value of display property
object.style.display = value // Set value for display property

There are many values ​​for the display property. However, this article will only cover ‘none’ and ‘block’ values.

display = ‘block’ // The element will be rendered as a block

display = ‘none’ // The element will not be displayed

See the following example for better visualization:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./test.css">
  </head>

  <body>
    <div id="example">
    </div>

    <button id="mybtn1" class="btn btn-primary">Hide div element</button>
    <button id="mybtn2" class="btn btn-primary">Show div element</button>
    <script>
        const myImage = document.getElementById('example');

        const myButton1= document.getElementById('mybtn1');
        const myButton2 = document.getElementById('mybtn2');

        myButton1.addEventListener('click', function toggleButton1() {
        if (myImage .style.display !== 'none') {
                myImage .style.display = 'none';
	        }
        });
        
        myButton2 .addEventListener('click', function toggleButton2() {
        if (myImage .style.display === 'none') {
                myImage .style.display = 'block';
	        }
        });

    </script>
</body>
</html>

Output:

I use two buttons, ‘Hide div element’ and ‘Show div element’, to hide and show the div element with an id equal to ‘example’. 

Every time button  ‘Hide div element’ is clicked, function toggleButton1() will be called and set the display property of the div element to ‘none’ if its value is different from ‘none’. 

On the other hand, ‘Show div element’ is used to display the div element. The toggleButton2() function checks the value of the display property. If it equals none, set it to block.

Method 2 – Use the style visibility property

Syntax:

object.style.visibility// get the value of visibility property
object.style.visibility= value // Set value for visibility property

Just like the case of the display property, we are only interested in two values ​​of the visibility property, hidden and visible.

visibility = ‘hidden’ // The element will disappear but still takes up place

visibility = ‘visible’ // Display the element

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./test.css">
  </head>

  <body>
    <div id="example">
    </div>

    <button id="mybtn1" class="btn btn-primary">Hide div element</button>
    <button id="mybtn2" class="btn btn-primary">Show div element</button>
    <script>
        const myImage = document.getElementById('example');

        const myButton1= document.getElementById('mybtn1');
        const myButton2= document.getElementById('mybtn2');

        myButton1.addEventListener('click', function toggleButton1() {
        if (myImage .style.visibility !== 'hidden') {
                myImage .style.visibility = 'hidden';
	        }
        });
        
        myButton2.addEventListener('click', function toggleButton2() {
        if (myImage .style.visibility === 'hidden') {
                myImage .style.visibility = 'visible';
	        }
        });

    </script>
</body>
</html>

Output:

In fact, this program works quite similarly to the example above. 

The only difference here is when using visibility, if the visibility = ‘hidden’, the div element will not disappear completely. It still takes up space but invisible to the user.

Summary

So you finally know how to show/hide a div element by id using javascript. Thanks for your interest in this article.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *