Javascript Show Hide Div Using Visibility

Updated on 23 Mar 2012,
Published on 27 Jun 2008

You can show or hide the div element dynamically using Javascript DOM getElementById method. visibility property of style object can be accessed using getElementById method of document object. visibility property can get or set the value that provides the functionality to toggle the show hide state of HTML <div> tag dynamically. When you use visibility property to hide the div element, it just hides the div layer along with its child HTML elements and inner text but it does not release the space block captured by it on the HTML document.

JavaScript DOM Examples:

You can see the live samples and examples of JavaScript DOM from the following links:

More on visibility property to show or hide the Div

Basically visibility property belongs to the CSS styles that help to hide or show the HTML elements. Javascript DOM style object can access this CSS property that can modify its value dynamically.

visibility: visibility property accepts two types of values hidden or visible. hidden value for visibility property hides the target HTML element where as visible value for the property shows the target HTML element.

You can set the hidden or visible value dynamically using Javascript to show or hide the div element’s visibility.

Javascript Syntax to Show or Hide Div using visibility

document.ElementById("id").style.visibility = "visible";

document.ElementById("id").style.visibility = "hidden";

Javascript Code to Show or Hide Div

<html>
<head>
    <title>Javascript Show Hide Div Visibility</title>
    <style type="text/css">
        .divStyle {
            width: 200px;
            height: 100px;
            margin: 0px auto;
        }
    </style>

    <script language="javascript" type="text/javascript">
    <![CDATA[
        function showHideDiv() {
            var divstyle = new String();
            divstyle = document.getElementById("div1").style.visibility;
            if (divstyle.toLowerCase() == "visible" || divstyle == "") {
                document.getElementById("div1").style.visibility = "hidden";
            }
            else {
                document.getElementById("div1").style.visibility = "visible";
            }
        }
    ]]>
    </script>
</head>
<body>
    <div id="div1" class="divStyle">
        Show Hide Div visibility using Javascript DOM.
    </div>
    <center>
        <input type="button" 
                value="show hide div" 
                onclick="showHideDiv()" />
    </center>
</body>
</html>

Output:

You can see the output of above discussed codes from the following link:

Show Hide Div Visibility

Continue to next tutorial: Javascript Div Collapse Style Using Display None to learn how to release the white space occupied by the Div element by collapsing it using JavaScript DOM style properties.

Previous Tutorial

Next Tutorial

sponsored links

11 Responses to "Javascript Show Hide Div Using Visibility"

utsav

good Article

Mike Scirocco

You can toggle the button text too:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Javascript Show Hide Div</title>

<style type="text/css">
.divStyle {
width:200px;
}
</style>

<script language="javascript" type="text/javascript">

function showHideDiv()
{
var divstyle = new String();
divstyle = document.getElementById("div1").style.visibility;

if(divstyle.toLowerCase()=="visible" || divstyle == "")
{
document.getElementById("div1").style.visibility = "hidden";
document.getElementById('btn1').value='Show Content';
}
else
{
document.getElementById("div1").style.visibility = "visible";
document.getElementById('btn1').value='Hide Content';
}
}

</script>
</head>

<body>
<div id="div1">
Show Hide Div visibility using Javascript DOM.
</div>
<input type="button" value="show hide div" onclick="showHideDiv()" id='btn1'>
</body>
</html>

suresh babu

Hi, Above this code is not working IE browser, Can me help to run IE reg Suresh

Deepak MP

How can i avoid the space between the hidden div and the following visible elemrnt? Thanks in advance!

sumit

it works good man really thanks ...........

Ali

Hi Thanks for share this tutorial and example

Andre DeSean Woodley Jr

This is great! Keep up the great work.

BME

It kind of works. I configured the code to show the <divstyle when an <input type checkbox was checked. The problem is when the page is first loaded it is not hidden until the checkbox is checked and then unchecked. Only after that will the function work as desired. What needs to be added to the code for the <divstyle to be hidden by default and only show when the checkbox is checked?

Ezineasp.net

@BME You can add => visibility: hidden inside the divstyle css class.

gowtham

Nice Tutorial I have added your Show/Hide DIV Snippet to my website

none

Check your tags vaildation, center is not vaild any more, use margin: 0 auto 0; for make it vaild. Except that every thing alright.