Javascript Div Collapse Style Using Display None

Updated on 23 Mar 2012,
Published on 27 Jun 2008

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.

JavaScript DOM Examples:

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

More on display property to collapse the div

Basically display property belongs to the CSS styles that helps 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

<html>
<head>
    <title>Javascript Div Collapse Style Using Display None</title>
    <style type="text/css">
        .divStyle {
            width: 200px;
            height: 100px;
            margin: 0px auto;
        }
    </style>

    <script language="javascript" type="text/javascript">
    <![CDATA[
        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" class="divStyle">
        Set CSS display property to none or block using Javascript DOM dynamically.
    </div>
    <center>
        <input type="button" 
                value="display Div" 
                onclick="displayDiv()" />
    </center>
</body>
</html>

Output:

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

Div Collapse Style Using Display None

Continue to next tutorial: Javascript Change Image onmouseover to learn how to rollover image onmouseover event using JavaScript.

Previous Tutorial

Next Tutorial

sponsored links

5 Responses to "Javascript Div Collapse Style Using Display None"

Mike

The clearest, most succinct example of using div collapse style that I have seen on the internet. Many thanks!!!

Brett Peirce

The only thing I might add/change about this script is that I would have used a "title" div with an onclick event, rather than a button, as it would be more representative of how this type of thing is used. Thank you very much, however, for providing this script!

Zeus Duran

Wow this is very useful. Thanks alot.

A quick question:
What would you do in order to hide the text inside the <div> </div> tags when you first launch the page?

Thanks in advance.

Ezineasp.net

Hi Zeus There are 2 options to do the same: First is to use the same method i.e. style="Display:none" for the div containing text and Second: to use style="visibility:hidden" for the div having text content. The only difference is that latter one holds actual space on web page required to display the content inplace whether it is in hidden mode or not. Whereas "display:none" releases the white space by collapsing the content. Advantage of using the "visibility:hidden" is that it does not let the content to move up and down while changing the visibilty mode of associated div tag dynamically. Hope this will help you. Good Luck.

kannan

one js funtion..but many control using display none or black.........