Wednesday, May 18, 2011

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.


5 comments:

paul bowman said...

Simple and reliable. Thanks for this script!

Samantha Jones said...

this is great.. i am using it in a list.. so when a link is clicked it shows two divs.. but i need that when another link is clicked, it replaces the two divs content instead of adding on... make sense?

Anonymous said...

Very Nice....But this is very simple. Try to implement the different thing!!!

Unknown said...

Thanks for posting this code, very useful and easy to use, I extended it to 9 divs to reveal answers to a simple quiz. www.connaflowerandgardenclub.org/quickquiz if you would like to have a look, thanks again and keep posting, we need you !!

Mark said...

To Conna FlowerClub:
I am happy my instructions was helpful to you and you used it in for better user experience on your site.