Hide or show div element

Want to learn how to hide div element on your HTML page with javascript? Or how to dynamically show div element? You are on right place. Here you will find simple tutorial, demo and code how to toggle (hide or show) <div> element with its content. With help of javascript div visibility is dynamically changed.

More article and samples how to hide or show HTML element find on Show and hide with javascript summary.
If you are interested in some other fancy javascript effects follow the link.

Demo for hiding and showing div element:

SHOW/HIDE <-- press here

Div is visible

Here is the sample HTML and Javascript code:

<script language="javascript">
    function showOrHide() 
    {
        var div = document.getElementById("showOrHideDiv");
        if (div.style.display == "block") 
        {
            div.style.display = "none";
        }
        else 
        {
            div.style.display = "block";
        }
    } 
</script>
 
<a href="javascript:showOrHide();">show/hide</a>
<div id="showOrHideDiv" style="display: none"><h4>Hello</h4></div>

What is happening in the code:


• When user click SHOW/HIDE link javascript showOrHide() function is called


• Method showOrHide() checks the value of the display style for the div showOrHideDiv


• If the display style of div is none (div is not visible) function will set div style to block - so the div will become visible


• If the display style of div is block (div is visible) function will set div style to none - so the div will be hidden

Demo for div element containing other HTML elements

The <div> tag is often used to group block-elements. You can put any HTML element inside div tag. In this example we put some text and two input HTML element. When user click link both textboxes are hided or showed.

SHOW/HIDE <-- press here

First name:
Last name:

This is a code:

 
<script language="javascript">
    function showOrHide() 
    {
        var div = document.getElementById("showOrHideDiv");
        if (div.style.display == "block") 
        {
            div.style.display = "none";
        }
        else 
        {
            div.style.display = "block";
        }
    }

</script>
<br/>
<a href="javascript:showOrHide();"><b>SHOW/HIDE</b></a> <-- press here
<br/><br/>
<div id="showOrHideDiv" style="display: none">
First name: <input type="text" name="FirstName" value="Donald" /><br />
Last name: <input type="text" name="LastName" value="Duck" /><br />
</div>

Purpose of this example is to demonstrate that in div tag can be many various HTML elements. So, when you hide div tag you hide all HTML element this div tag is contain. Same thing count for showing div.

If you want to change text of your link to Show or Hide when div tag is showed or hided take a look at change link text with javascript.

Demo of one javascript function for hiding various div elements

show/hide Div A	show/hide Div B
Div A	Div B

Here is a code of reusable javascript function divHideShow for hide div elements. This function can be called from various places. The input parameter in function divHideShow is id of <div> tag you want to hide or show.

<script language="javascript">

    function divHideShow(divToHideOrShow) 
    {
        var div = document.getElementById(divToHideOrShow);
        if (div.style.display == "block") {
            div.style.display = "none";
        }
        else {
            div.style.display = "block";
        }
    }
    
</script>
 

    <table style="width: 28%; height: 54px;">
        <tr>
            <td>
                <a href="javascript:divHideShow('divA');">hide DivA</a>
                </td>
            <td>
                <a href="javascript:divHideShow('divB');">hide DivB</a></td>
        </tr>
        <tr>
            <td>
                <div id="divA" style="display: block"><h4>Div A</h4></div></td>
            <td>
                <div id="divB" style="display: block"><h4>Div B</h4></div></td>
        </tr>
    </table>

In above code example same jscript function divHideShow(divToHideOrShow) is called from show/hide Div A link and from show/hide Div B.

One more thing, if you need here you can find instructions how to place two div elements in one line side by side.