Show/Hide Divs

[rswyatt]

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:

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

<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

[c1lonewolf]

If I'm understanding this right?!

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

[rswyatt]

Originally Posted by c1lonewolf

If I'm understanding this right?!

<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? :-)

[c1lonewolf]

re wire it anyway you need to it's just a basic funtion.

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()
		}
	}
}