Javascript Div Collapse Style Using Display None

by top54u.com 27 Jun, 2008

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

HTML Div CSS Clear Style

HTML Div Tag Overflow CSS Style Scrollbars

Javascript Code to Change Div Object innerHTML

HTML Div CSS Style Float

HTML Nested Div Positioning Using CSS Position Styles

Javascript Create New Div HTML Element Dynamically

HTML Div Style Transparent Background Color

CSS display property can be accessed using Javascript DOM style object that can be utilized to perform the collapse and expand behavior of HTML Div <div> tag. display property can get or set the value that provides the functionality to display none or show the div <div> html element. When you use the display none to hide the div element, it hides the inner text as well as div tag and releases the space blocked by the div whereas visibility property does not release the blocked space. This behavior moves the lower content below the div element to the upward direction when it releases the space while collapsing.

More on display property to collapse the div

Basically display property belongs to the CSS styles that help to expand or collapse the <div> element on the HTML document. Javascript DOM getElementById consists of style object that can access the display property of CSS and allows to modify the value of this property.

display:. display property accepts four types of values among them only two types of values provides the functionality to hide or display the <div> element. none and block are the values that can be used to apply div collapse style

You can set none or block values dynamically using Javascript to expand or collapse the div element.

Javascript Syntax for Div Collapse Style Using Display none

document. getElementById("id"). style. display = "none";

document. getElementById("id"). style. display = "block";

Javascript Code for Div Collapse Style Using Display none

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

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

    <script language="javascript" type="text/javascript">
    function displayDiv()
    {
        var divstyle = new String();
        divstyle = document.getElementById("div1").style.display;
        if(divstyle.toLowerCase()=="block" || divstyle == "")
        {
            document.getElementById("div1").style.display = "none";
        }
        else
        {
            document.getElementById("div1").style.display = "block";
        }
    }
    </script>


</head>

<body>
<div id="div1">
Set CSS display property to none or block using Javascript DOM dynamically.
</div>

<input type="button" value="display Div" onclick="displayDiv()" />

</body>

</html>

Spotlight.....

Be the first to rate this post