PDA

View Full Version : show div, but hide others in container.



turpentyne
Jul 25th, 2012, 06:16 PM
Annoying! I'm sure I've done this before, but I'm not remembering how it is done.

I have a div that contains a series of nested divs. Each one shows a clickable title and has its own nested div that relates to what i want to do. that contain options that will change based on previous results. So if the user has the 'buttstocks-expander' div open, and clicks to open the bolts-expander div, I want buttstocks-expander and any other 'x-expander' divs inside of 'container-div' to be hidden.

I've got a snippet of code to hide/show a div tag, but what I want is for all other open divs to revert to "hidden." That's the part I'm not sure how to do.

Here's where I'm at right now, and I can't seem to find any tutorials that quite do what I'm trying to do.
<SCRIPT LANGUAGE="JavaScript1.2">

// click on the div
function toggle( e, id ) {
var el = document.getElementById(id);
el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';

// save it for hiding
toggle.el = el;

// stop the event right here
if ( e.stopPropagation )
e.stopPropagation();
e.cancelBubble = true;
return false;
}

// click outside the div
document.onclick = function() {
if ( toggle.el ) {
toggle.el.style.display = 'none';
}
}


</script>


<body>
<div id="container-div">

<div style="float:left;">

<div id="buttstocks">
<a class="select-toggler" href="#" onClick="document.getElementById('buttstocks-expander').style.display='block';">
BUTTSTOCKS</a>
<div id="buttstocks-expander" style="display:none;">buttstocks pictures & detail<br /><br />
</div>
</div>

<div id="bolts">
<a class="select-toggler" href="#" onClick="document.getElementById('bolts-expander').style.display='block';"> BOLTS</a>
<div id="bolts-expander" style="display:none;">Bolt pictures & detail<br />
<img src="http://www.mcmillanusa.com/iamges/build-my-rifle.jpg" width=130 height=130/> &nbsp; <img src="http://www.mcmillanusa.com/iamges/build-my-rifle.jpg" width=130 height=130/> &nbsp;<br /><br />
</div>
</div>

<div id="pistol-grips">
<a class="select-toggler" href="#" onClick="document.getElementById('pistol-grips-expander').style.display='block';">PISTOL GRIPS</a>
<div id="pistol-grips-expander" style="display:none;">pistol grips pictures & detail
<img src="http://www.mcmillanusa.com/iamges/build-my-rifle.jpg" width=130 height=130/> &nbsp; <img src="http://www.mcmillanusa.com/iamges/build-my-rifle.jpg" width=130 height=130/> &nbsp;
<br />
</div>
</div>

<div id="magazines">
<a class="select-toggler" href="#" onClick="document.getElementById('magazines-expander').style.display='block';">MAGAZINES</a>
<div id="magazines-expander" style="display:none;">magazines pictures & detail<br /><br />
</div>
</div>

<div id="hand-guards">
<a class="select-toggler" href="#" onClick="document.getElementById('hand-guards-expander').style.display='block';">HAND GUARDS</a>
<div id="hand-guards-expander" style="display:none;">hand guards pictures & detail<br /><br />
</div>
</div>


</div>
<!-- end selector divs container div -->

WolfShade
Jul 25th, 2012, 06:20 PM
I usually loop through all the respective divs and "close" or "hide" them, then "open" or "reveal" the one that should be visible.

turpentyne
Jul 25th, 2012, 06:32 PM
cool...


Seems to work, doing this:



<SCRIPT LANGUAGE="JavaScript1.2">

function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['pistol-grips-expander','buttstocks-expander','magazines-expander','bolts-expander','hand-guards-expander','suppressors-expander','muzzle-brakes-expander','barrel-options-expander','accessory-rail-expander'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}

</script>

<div id="magazines">
<a href="javascript:showHide('magazines-expander');">MAGAZINES</a>
<div id="magazines-expander" style="display:none;">magazines pictures & detail<br /><br />
</div>
</div>

etc.



Thanks!