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 -

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

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

catwoman2970 and vwphillips sittin' in a tree..

Thread: multiple instances of show/hide divs

Thread Tools

Search Thread

multiple instances of show/hide divs

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions