Show or hide multiple divs

In this tutorial you will learn how to hide multiple div elements with only one action (for example click on button). To hide or show HTML elements javascript is used. Usually for hiding and showing HTML elements, HTML elements are placed in one div tag and this div tag is hided or showed with a help of javascript.

Here you can find two demonstrations:

• how to make one jscript function which can be called from multiple places on web page


• how to hide multiple divs with only one click link

If you didn't find exactly what you need in this article try How to show or hide with jscript tips or javascript effects tutorials.

One javascript function which can be reused to hide multiple divs elements

Demonstration:

show/hide Div A

Div A

show/hide Div B

Div B

Here is a sample of javascript function divHideShow with one parameter - id of div you want to hide or show. This code hide or show divA with click on link show/hide Div A which call a function divHideShow. For link show/hide Div B same function divHideShow is called to hide divB (but with divB parameter).

<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>

    <a href="javascript:divHideShow('divA');">show/hide Div A</a>
    <div id="divA" style="position:absolute; display: block"><h4>Div A</h4></div>
    <br />  
    <a href="javascript:divHideShow('divB');">show/hide Div B</a>
    <div id="divB" style="display: block"><h4>Div B</h4></div>

In this example div elements are in two line. Sometimes you could find useful tutorial how to place div elements in one line side by side.

If you want to change text of link when you click on the link to "Show" or "Hide" check Show and hide with javascript summary.

Hide or show multiple divs with only one click

Demonstration

show/hide Div C and Div D

Div C

Div D

Here is a sample of code which hide two div tags with only one click on link show/hide Div C and Div D.

<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>

    <a href="javascript:divHideShow('divC');divHideShow('divD');">show/hide Div C and Div D</a>
    <div id="divC" style="position:absolute; display: block"><h4>Div C</h4></div>
    <br />
    <div id="divD" style="display: block"><h4>Div D</h4></div>

If you need to center div elements set margin-right and margin-left to auto.