Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Show/Hide Divs

  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show/Hide Divs

    Hello all,

    I'm having some frustration with showing/hiding divs...

    Here's what I'm doing.

    I have a tree menu on the left which I'm using a different function to expand/collapse. I'm using the below script to actually show the content on the right side of the page on click. On double click of the menu item I take the content away...

    The code for the menu items is:
    Code:
    <DIV class='menutitle' onClick="show(true,'div1');" onDblClick="hide(true,'div1');">Welcome</DIV>
    <DIV class='menutitle' onClick="show(true,'div3');" onDblClick="hide(true,'div3');">Control Panel</div>
    Now - here is where I'm lost. Let's say I click on the div containing "Welcome". Right now - the content displays on the right.
    If I double click - it goes away.

    What I want to do now - however - is when I click on "Control Panel" make the div content be hidden for "Welcome" and now show the div content for Control Panel. Right now - if I click on Control Panel - the content shows - but underneath is still the content for Welcome.

    Code:
    <script type="text/javascript">
    <!-- Begin
    // quick browser tests
    var ns4 = (document.layers) ? true : false;
    var ie4 = (document.all && !document.getElementById) ? true : false;
    var ie5 = (document.all && document.getElementById) ? true : false;
    var ns6 = (!document.all && document.getElementById) ? true : false;
    
    function show(sw,obj) {
    	// show/hide the divisions
    	if (sw && (ie4 || ie5) ) document.all[obj].style.visibility = 'visible';
    	if (!sw && (ie4 || ie5) ) document.all[obj].style.visibility = 'hidden';
    	if (sw && ns4) document.layers[obj].visibility = 'visible';
    	if (!sw && ns4) document.layers[obj].visibility = 'hidden';
    }
    function hide(sw,obj) {
    	// show/hide the divisions
    	if (sw && (ie4 || ie5) ) document.all[obj].style.visibility = 'hidden';
    	if (!sw && (ie4 || ie5) ) document.all[obj].style.visibility = 'visible';
    	if (sw && ns4) document.layers[obj].visibility = 'hidden';
    	if (!sw && ns4) document.layers[obj].visibility = 'visible';
    }
    // End -->
    </script>

    Any thoughts would be very appreciated!

    Thanks,
    Rich
    Rich S. Wyatt
    D3 Web Creations

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Posts
    429
    Thanks
    0
    Thanked 20 Times in 20 Posts
    If I'm understanding this right?!
    Code:
    <DIV class='menutitle' onClick="show(true,'div1');hide(true,'div3');" onDblClick="hide(true,'div1');">
    Welcome
    </DIV>
    
    <DIV class='menutitle' onClick="show(true,'div3');hide(true,'div1');  " onDblClick="hide(true,'div3');  ">
    Control Panel
    </div>

    the more containers you have though, you need to call a function that doesn't allow one to be open when the other is visible.
    Hope this helped.
    NO Limits!! www.dhcreationstation.com
    ------------------------------------------------------------
    Broken items wanted for tinkerin'! PostItNow@BrokenEquipment.com

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by c1lonewolf
    If I'm understanding this right?!
    Code:
    <DIV class='menutitle' onClick="show(true,'div1');hide(true,'div3');" onDblClick="hide(true,'div1');">
    Welcome
    </DIV>
    
    <DIV class='menutitle' onClick="show(true,'div3');hide(true,'div1');  " onDblClick="hide(true,'div3');  ">
    Control Panel
    </div>

    the more containers you have though, you need to call a function that doesn't allow one to be open when the other is visible.
    Hope this helped.

    Well, that is great - however, there are more than just those two menu items... I need the function to be able to figure out wich one is currently "open", close it, then open the one being clicked on.

    Am I making sense? :-)
    Rich S. Wyatt
    D3 Web Creations

  • #4
    Regular Coder
    Join Date
    Sep 2002
    Posts
    429
    Thanks
    0
    Thanked 20 Times in 20 Posts
    re wire it anyway you need to it's just a basic funtion.

    Code:
    function CKM(){
    	if (menu=="none"){
    		M1=document.getElementById('Container1');
    		M1visible=(M1.style.visibility!="visible");
    		if(M1visible){Show1()
    		}
    		M2=document.getElementById('Container2');
    		M2visible=(M2.style.visibility!="hidden");
    		if(M2visible){Hide2()
    		}
    		M3=document.getElementById('Container3');
    		M3visible=(M3.style.visibility!="hidden");
    		if(M3visible){Hide3()
    		}
    	}
    	if (menu=="Control Panel"){
    		M1=document.getElementById('Container1');
    		M1visible=(M1.style.visibility!="hidden");
    		if(M1visible){Hide1()
    		}
    		M2=document.getElementById('Container2');
    		M2visible=(M2.style.visibility!="visible");
    		if(M2visible){Show2()
    		}
    		M3=document.getElementById('Container3');
    		M3visible=(M3.style.visibility!="hidden");
    		if(M3visible){Hide3()
    		}
    	}
    	if(menu=="Welcome"){
    		M1=document.getElementById('Container1');
    		M1visible=(M1.style.visibility!="hidden");
    		if(M1visible){Hide1()
    		}
    		M2=document.getElementById('Container2');
    		M2visible=(M2.style.visibility!="hidden");
    		if(M2visible){Hide2()
    		}
    		M3=document.getElementById('Container3');
    		M3visible=(M3.style.visibility!="visible");
    		if(M3visible){Show3()
    		}
    	}
    }
    NO Limits!! www.dhcreationstation.com
    ------------------------------------------------------------
    Broken items wanted for tinkerin'! PostItNow@BrokenEquipment.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •