Javascript Show Hide Div Using Visibility

by top54u.com 22 Jun, 2008

Inside DHTML Tutorials | DOM Tutorials | HTML Tutorials | JavaScript Tutorials

HTML Div CSS Clear Style

Javascript Code to Change Div Object innerHTML

Javascript Create New Div HTML Element Dynamically

Javascript Append Div Contents

HTML Div Tag Overflow CSS Style Scrollbars

HTML Nested Div Positioning Using CSS Position Styles

HTML Div CSS Style Float

Spotlight.....

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.

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

<!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";
        }
        else
        {
            document.getElementById("div1").style.visibility = "visible";
        }
    }
    </script>


</head>

<body>
<div id="div1">
Show Hide Div visibility using Javascript DOM.
</div>

<input type="button" value="show hide div" onclick="showHideDiv()" />

</body>

</html>

Spotlight.....

Currently rated 3.5 by 2 people