...

View Full Version : Show/Hide Divs



rswyatt
11-11-2004, 09:08 PM
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! :thumbsup:

Thanks,
Rich

c1lonewolf
11-12-2004, 12:08 AM
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
11-12-2004, 12:10 AM
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
11-12-2004, 12:25 AM
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()
}
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum