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&view=details&id=1:Bioprocessing%20in%20the%20Workplace®&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
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&view=details&id=1:Bioprocessing%20in%20the%20Workplace®&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