I am trying to show/hide multiple divs with the one button, but I am

Question

0

Asked: June 7, 20262026-06-07T23:14:42+00:00 2026-06-07T23:14:42+00:00

I am trying to show/hide multiple divs with the one button, but I am

0

I am trying to show/hide multiple divs with the one button, but I am confused on how to go about it. The button works with just setting the visibility of one div, but I can’t get it to work with multiple.

<html>
<head>
<title>| Bali Thai Imports |</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Description" content="Wholesale fashion accessories, discount designer handbags, vases, wall hangings, decorative bird cages, musical instruments, lanterns and offered by Bali Thai Imports." />
<meta name="Keywords" content="wholesale fashion accessories, discount designer handbags, decorative bird cages, decorative vases, online musical instruments, decorative lanterns, wholesale keychains, discount vases, decorative pillow covers, wind chimes for sale, decorative wall hanging, decorative wall hangings, kites" />
<meta name="robots" content="Index,ALL" />
<meta name="revisit-after" content="7 Days" />
<meta name="rating" content="General" />
<meta name="language" content="en" />
<meta name="distribution" content="Global" />

<link href="stylesheet.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('bt1').value=='Hide Layer'){
document.getElementById('bt1').value = 'Show Layer';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Hide Layer';
document.getElementById(id).style.display = 'inline';
}
}

</script>

<script type="text/javascript">

    var activeMenuItem = new Array();

    function isUlInArray(inputObj,ulObj){
        while(inputObj && inputObj.id!='dhtmlgoodies_listMenu'){
            if(inputObj==ulObj)return true;
            inputObj = inputObj.parentNode;         
        }       
        return false;
    }

    function showHideSub(e,inputObj)
    {


        if(!inputObj)inputObj=this;
        var parentObj = inputObj.parentNode;
        var ul = parentObj.getElementsByTagName('UL')[0];
        if(activeMenuItem.length>0){
            for(var no=0;no<activeMenuItem.length;no++){
                if(!isUlInArray(ul,activeMenuItem[0]) && !isUlInArray(activeMenuItem[0],ul)){
                    activeMenuItem[no].style.display='none';
                    activeMenuItem.splice(no,1);
                    no--;
                }
            }           
        }
        if(ul.offsetHeight == 0){
            ul.style.display='block';
            activeMenuItem.push(ul);
        }else{
            ul.style.display='none';
        }
    }

    function showHidePath(inputObj)
    {
        var startTag = inputObj;
        showHideSub(false,inputObj);
        inputObj = inputObj.parentNode;
        while(inputObj){            
            inputObj = inputObj.parentNode;
            if(inputObj.tagName=='LI')showHideSub(false,inputObj.getElementsByTagName('A')[0]);
            if(inputObj.id=='dhtmlgoodies_listMenu')inputObj=false; 
        }       
    }

    function initMenu()
    {
        var obj = document.getElementById('dhtmlgoodies_listMenu');
        var linkCounter=0;
        var aTags = obj.getElementsByTagName('A');
        var activeMenuItem = false;
        var activeMenuLink = false;
        var thisLocationArray = location.href.split(/\//);
        var fileNameThis = thisLocationArray[thisLocationArray.length-1];
        if(fileNameThis.indexOf('?')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('?'));
        if(fileNameThis.indexOf('#')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('#'));

        for(var no=0;no<aTags.length;no++){
            var parent = aTags[no].parentNode;
            var subs = parent.getElementsByTagName('UL');
            if(subs.length>0){
                aTags[no].onclick = showHideSub;    
                linkCounter++;
                aTags[no].id = 'aLink' + linkCounter;
            }   

            if(aTags[no].href.indexOf(fileNameThis)>=0 && aTags[no].href.charAt(aTags[no].href.length-1)!='#'){             
                if(aTags[no].parentNode.parentNode){                                
                    var parentObj = aTags[no].parentNode.parentNode.parentNode;
                    var a = parentObj.getElementsByTagName('A')[0];
                    if(a.id && !activeMenuLink){

                        activeMenuLink = aTags[no];
                        activeMenuItem = a.id;
                    }
                }
            }       
        }       

        if(activeMenuLink){
            activeMenuLink.className='activeMenuLink';
        }
        if(activeMenuItem){
            if(document.getElementById(activeMenuItem))showHidePath(document.getElementById(activeMenuItem));   
        }
    }
    window.onload = initMenu;
    </script>
<style type="text/css">
<!--
body {
    background-color: #cc5302;
}
-->
</style>
</head>
<body>
<div id="title"><img src="images/title2.png" alt=""></div>
<div id="topBanner">LIKE US ON FACEBOOK FOR A 10% DISCOUNT!</div>
<div id="productsTitle"><span style="color:white;font-weight=bold;"><span style="color:black;">| </span>&nbsp;    PRODUCTS    &nbsp;<span style="color:black;"> |</span></span></div>
<div id="topNav"><ul class="topnavigation">
        |
        <li><a href="index.htm">HOME</a></li>  
        |
        <li><a href="http://balithaiimports.3dcartstores.com/view_cart.asp">VIEW CART</a></li>  
        |
        <li><a href="http://balithaiimports.3dcartstores.com/">PRODUCTS</a></li>  
        | 
        <li><a href="http://balithaiimports.3dcartstores.com/About-Us_ep_7.html">ABOUT US</a></li>  
        |  
        <li><a href="https://balithaiimports.3dcartstores.com/myaccount.asp?">MY ACCOUNT</a></li>  
        |  
        <li><a href="https://balithaiimports.3dcartstores.com/crm.asp?action=contactus">CONTACT US</a></li>
        |
        </ul> 
</div>
<div id="centerRotator">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="650" height="457">
        <param name="movie" value="Flash/center_rotator.swf">
        <param name="quality" value="high">
        <embed src="Flash/center_rotator.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="650" height="457"></embed>
        </object>
</div>
<!--<div id="socialNetworking">Social Networking</div>-->
<div id="facebook"><a href="https://www.facebook.com/pages/Bali-Thai-Imports/184255874965768"><img src="images/Facebook.png" width="40" height="40" align="middle" alt="Like us On Facebook" /></a> </div>
<div id="twitter"><a href="https://twitter.com/BaliThaiImports"><img src="http://a0.twimg.com/a/1341848431/images/resources/twitter-bird-light-bgs.png" width="80" height="80" align="middle" alt="Follow us on Twitter" /></a> </div>
<div id="pinterest"><a href="http://pinterest.com/balithaiimports/"><img src="http://passets-ec.pinterest.com/images/about/buttons/pinterest-button.png" width="80" height="28" alt="Follow Us on Pinterest" /></a></div>
<div id="manta"><a href="http://www.manta.com/c/mxcpctc/bali-thai-imports"><img src="images/mantaBadge_lg.png" width="80" height="40" alt="Follow Us on Manta" /></a></div>
<div id="logo"><img src="images/Logo.jpg" width="155" height="220" alt=""></div>
<div id="products">
<ul id="dhtmlgoodies_listMenu">
            <li><a href="http://balithaiimports.3dcartstores.com/Jewelry_c_39.html">Jewelry</a>

            <li><a href="http://balithaiimports.3dcartstores.com/Pottery_c_150.html">Pottery</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Toys_c_160.html">Toys</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Lanterns_c_98.html">Lanterns</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Bags_c_95.html">Handbags</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Batik-Shoulder-Bags_c_138.html">Batik Shoulder Bag</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Hats_c_183.html">Hats</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Incense_c_69.html">Incense</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Mobiles_c_180.html">Mobiles</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Childrens-Bags_c_181.html">Children's Backpacks</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Birdcage-Decoration_c_205.html">Decorative Birdcages</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Musical-Instruments_c_158.html">Musical Instruments</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Hand-Painted-Containers_c_111.html">Hand Painted Containers</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Windchimes_c_99.html">Windchimes</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Wood-Carvings_c_156.html">Wood Carvings</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Story-Boards_c_167.html">Storyboards</a></li>
            <li><a href="#">Gift Items</a>
                <ul>
                    <li><a href="http://balithaiimports.3dcartstores.com/Coconut-Shells_c_202.html">Coconut Shells</a></li>
                    <li><a href="http://balithaiimports.3dcartstores.com/Bells_c_217.html">Gongs & Bells</a></li>
                    <li><a href="http://balithaiimports.3dcartstores.com/Statues_c_211.html">Statues</a></li>
                    <li><a href="http://balithaiimports.3dcartstores.com/Napkin-Rings_c_106.html">Napkin Rings</a></li>
                    <li><a href="http://balithaiimports.3dcartstores.com/Bowls_c_125.html">Wooden Bowls</a></li>
                    <li><a href="http://balithaiimports.3dcartstores.com/Trays_c_201.html">Trays</a></li>
                </ul>           
            </li>
            <li><a href="http://balithaiimports.3dcartstores.com/Wall-Hangings_c_124.html">Wall Hangings</a></li>
            <li><a href="#">Clothing</a>
                <ul>
                    <li><a href="http://balithaiimports.3dcartstores.com/Sandals_c_172.html">Sandals</a></li>
                    <li><a href="http://balithaiimports.3dcartstores.com/Sarong-Buckles_c_152.html">Sarong Buckles</a></li>
                    <li><a href="http://balithaiimports.3dcartstores.com/Scarves_c_194.html">Silk Scarves</a></li>
                </ul>           
            </li>
            <li><a href="http://balithaiimports.3dcartstores.com/Umbrellas_c_121.html">Umbrellas</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Backpacks_c_139.html">Backpacks</a></li>
            <li><a href="http://balithaiimports.3dcartstores.com/Vases_c_47.html">Vases</a></li>
        <li><a href="http://balithaiimports.3dcartstores.com/Sarongs_c_187.html">Sarongs</a></li>
        </ul>
</div>
<div id="footer"><span class="footer">Bali Thai Imports LLC - 2011 All Rights Reserved</span></div>
<div id="pictureOne"><img src="images/dscn0062.jpg" alt=""></div>
<div id="pictureTwo"><img src="images/jsr-03.jpg" alt=""></div>
<div id="pictureThree"><img src="images/snr0.jpg" alt=""></div>
<div id="pictureFour"><img src="images/brb050.jpg" alt=""></div>
<div id="pictureFive"><img src="images/cipa-02h.jpg" alt=""></div>
<div id="pictureSix"><img src="images/21840499b_2.jpg" alt=""></div>
<div id="pictureSeven"><img src="images/gd-02.jpg" alt=""></div>
<div id="pictureEight"><img src="images/sst-098.jpg" alt=""></div>
<div id="productsBackground"><img src="images/productsBackground.png" alt=""></div>
<div id="divider1"><img src="images/divider.png" alt=""></div>
<div id="divider2"><img src="images/divider.png" alt=""></div>
<input type=button name=type id='bt1' onclick="setVisibility('products');";> 

</body>
</html>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-07T23:14:44+00:00

What you need to do is adding a class to the divs you need to show/hide, lets say: toggleVisible. So the html for those divs will look something like this:

<div id="productsTitle" class="toggleVisible"> ... </div>

<div id="products" class="toggleVisible"> ... </div>

<div id="productsBackground" class="toggleVisible"> ... </div>

Then your setVisibility function, instead of receiving an id as a parameter, it will receive a class name, so in your function you will get all the elements with such class name, and change its visibility:

function setVisibility(className) {
    var elems = document.getElementsByClassName(className);
    var displayVal;

    if(document.getElementById('bt1').value=='Hide Layer'){
        document.getElementById('bt1').value = 'Show Layer';
        displayVal = 'none';
    }else{
        document.getElementById('bt1').value = 'Hide Layer';
        displayVal = 'inline';
    }

    for (var i = 0; i < elems.length; i++) {
        elems[i].style.display = displayVal;
    }   
}

And finally, your button code will call setVisibility passing toggleVisible as the class name:

<input type=button name=type id='bt1' onclick="setVisibility('toggleVisible');";>

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I am trying to show/hide multiple divs with the one button, but I am

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply