PDA

View Full Version : multiple instances of show/hide divs



catwoman2970
02-17-2009, 06:19 PM
Hello,

I'm using js to show and hide divs when a user clicks on a tab in a group. It changes the visibility of divs upon clicking. The issue is that I'd like to have two different groups of tabs on the same page. When I click on a tab in say, Group 1, the js makes all the other divs in both groups hidden. I need to make them work independently i.e. clicking on a tab in Group 1 shows its corresponding div and hides the ones in its group; same for Group 2. Here is the code -




<html>

<head>

<style>
#insect1, #insect2, #insect3, #insect4 {position:absolute;width:14.7em;}
#insect3, #insect4 { margin-top:1em;}
.showing, .notShowing a { text-transform:uppercase; font-size:.9em; text-decoration:none; display:block; padding:0.1em 1em; border:1px solid #bfbfbf; border-bottom:0;}
.showing { background:#5287b3; color:#fff;}
.notShowing a { background:#f3f3f3;}
.notShowing a:hover { text-decoration:underline;}
.featuredBoxTabs { margin:0; padding:0; border-bottom:1px solid #bfbfbf; float:left; width:100%;}
.featuredBoxTabs li { list-style:none; float:left; margin-left:.2em;}
.featuredContent { clear:left; margin-top:1em; float:left; width:93%;}

</style>

<script language="javascript" type="text/javascript">
function showDiv(pass) {
var divs = document.getElementsByTagName('div');
var insectDivs = ['insect1','insect2'];

for (j=0;j<insectDivs.length;j++){
for(k=0;k<divs.length;k++){
if(divs[k].id.match(insectDivs[j])){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[k].style.visibility="hidden";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[k]].display = 'hidden';
else // IE 4
document.all.hideShow.divs[k].visibility = 'hidden';
}
}
}

for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
if (document.getElementById)
divs[i].style.visibility="visible";
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.hideShow.divs[i].visibility = 'visible';
}
}
}
</script>
</head>

<body>

<div id="insect1" class="featuredBox">

<ul class="featuredBoxTabs">
<li class="notShowing"><a href="javascript:showDiv('insect2')">Events</a></li>
<li class="showing">News</li>
</ul>

<div class="featuredContent">
<h3>Featured Article</h3>
None
</div><!--featuredContent-->
</div><!--insect1-->

<div id="insect2" class="featuredBox">

<ul class="featuredBoxTabs">
<li class="showing">Events</li>
<li class="notShowing"><a href="javascript:showDiv('insect1')">News</a></li>
</ul>

<div class="featuredContent">
<h3>Latest Events</h3>
<ul class="eventlistmodEventsList">
<li>
<span class="date">01.29.2009 - 01.29.2009 | 09.00</span>
<span class="location"><a href="/index.php?option=com_eventlist&amp;view=details&amp;id=1:Bioprocessing%20in%20the%20Workplace®&amp;Itemid=4">Bioprocessing in the Workplace®</a>
</span>
</li>
</ul>
</div><!--featuredContent-->

</div><!--insect2-->



</body>
</html>



If you duplicate the tab group in the code, you'll see what I mean.

Thank you much,
Sue

vwphillips
02-17-2009, 06:50 PM
<html>

<head>

<style>
#insect1, #insect2, #insect3, #insect4 {position:absolute;width:14.7em;}
#insect3, #insect4 { margin-top:1em;}
.showing, .notShowing a { text-transform:uppercase; font-size:.9em; text-decoration:none; display:block; padding:0.1em 1em; border:1px solid #bfbfbf; border-bottom:0;}
.showing { background:#5287b3; color:#fff;}
.notShowing a { background:#f3f3f3;}
.notShowing a:hover { text-decoration:underline;}
.featuredBoxTabs { margin:0; padding:0; border-bottom:1px solid #bfbfbf; float:left; width:100%;}
.featuredBoxTabs li { list-style:none; float:left; margin-left:.2em;}
.featuredContent { clear:left; margin-top:1em; float:left; width:93%;}

</style>

<script language="javascript" type="text/javascript">
function showDiv(pass,insectDivs) {
var divs = document.getElementsByTagName('div');
for (var j=0;j<insectDivs.length;j++){
for(k=0;k<divs.length;k++){
if(divs[k].id.match(insectDivs[j])){//if they are 'see' divs
divs[k].style.visibility="hidden";// show/hide
}
}
}

for(var i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
divs[i].style.visibility="visible";
}
}
}
</script>
</head>

<body>

<div id="insect1" class="featuredBox">

<ul class="featuredBoxTabs">
<li class="notShowing"><a href="javascript:showDiv('insect2',['insect1','insect2'])">Events</a></li>
<li class="showing">News</li>
</ul>

<div class="featuredContent">
<h3>Featured Article</h3>
None
</div><!--featuredContent-->
</div><!--insect1-->

<div id="insect2" class="featuredBox">

<ul class="featuredBoxTabs">
<li class="showing">Events</li>
<li class="notShowing"><a href="javascript:showDiv('insect1',['insect1','insect2'])">News</a></li>
</ul>

<div class="featuredContent">
<h3>Latest Events</h3>
<ul class="eventlistmodEventsList">
<li>
<span class="date">01.29.2009 - 01.29.2009 | 09.00</span>
<span class="location"><a href="/index.php?option=com_eventlist&amp;view=details&amp;id=1:Bioprocessing%20in%20the%20Workplace®&amp;Itemid=4">Bioprocessing in the Workplace®</a>
</span>
</li>
</ul>
</div><!--featuredContent-->

</div><!--insect2-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="insect3" class="featuredBox">

<ul class="featuredBoxTabs">
<li class="notShowing"><a href="javascript:showDiv('insect4',['insect3','insect4'])">Events</a></li>
<li class="showing">News</li>
</ul>

<div class="featuredContent">
<h3>Featured Article</h3>
None
</div><!--featuredContent-->
</div><!--insect1-->

<div id="insect4" class="featuredBox">

<ul class="featuredBoxTabs">
<li class="showing">Events</li>
<li class="notShowing"><a href="javascript:showDiv('insect3',['insect3','insect4'])">News</a></li>
</ul>

<div class="featuredContent">
<h3>Latest Events</h3>
<ul class="eventlistmodEventsList">
<li>
<span class="date">01.29.2009 - 01.29.2009 | 09.00</span>
<span class="location"><a href="/index.php?option=com_eventlist&amp;view=details&amp;id=1:Bioprocessing%20in%20the%20Workplace®&amp;Itemid=4">Bioprocessing in the Workplace®</a>
</span>
</li>
</ul>
</div><!--featuredContent-->

</div><!--insect2-->




</body>
</html>

catwoman2970
02-17-2009, 07:59 PM
Will you marry me?

Snookerman
02-17-2009, 08:18 PM
:D catwoman2970 and vwphillips sittin' in a tree..