...

View Full Version : How to make tabs that show/hide content?



mmendo
04-21-2005, 02:50 PM
Can anyone point me in the right direction . . . I would like to make a set of horizontal tabs that, onClick, shows content below that is related to that tab.

Any advice on a good script for doing this?

Thanks,
Nicole

Kor
04-21-2005, 04:25 PM
here's a basic example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#tabs span {
background-color: #CCCCCC;
cursor:pointer;
}
#exp div {
background-color: #F5F5F5;
width: 100px;
position:absolute;
visibility:hidden;
}
-->
</style>
<script type="text/JavaScript">
var ind;var x; var y; var h;
function showE(o,v){
hideAll();
var oTab = o.parentNode.getElementsByTagName('span');
for(var i=0;i<oTab.length;i++){
if(o==oTab[i]){
ind=i;break
}
}
h = o.offsetHeight;
x = o.offsetLeft;
y = o.offsetTop;
while(o.offsetParent){
if(o==document.getElementsByTagName('body')[0]){break;}
else{
x=x+o.offsetParent.offsetLeft;
y=y+o.offsetParent.offsetTop;
o=o.offsetParent;
}
}
var oExp = document.getElementById('exp').getElementsByTagName('div')[ind];
oExp.style.left = x+'px';
oExp.style.top = (y+h)+'px';
if((oExp.style.visibility == 'hidden')||(oExp.style.visibility == '')){
oExp.style.visibility='visible';
}
else{oExp.style.visibility='hidden';}
}
function hideAll(){
var oExp = document.getElementById('exp').getElementsByTagName('div');
for(var i=0;i<oExp.length;i++){
oExp[i].style.visibility='hidden';
}
}
</script>
</head>
<body>
<table border="0" align="center" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td>
<div id="tabs">
<span onclick="showE(this)">tab1</span> | <span onclick="showE(this)">tab2</span>
</div>
</td>
</tr>
</tbody>
</table>
<div id="exp">
<div>descripive text for tab1</div>
<div>descripive text for tab2</div>
</div>
</body>
</html>

mmendo
04-21-2005, 07:42 PM
Thanks, that's pretty much what I was looking for. One question, though, can I set it up so the tab content appears on the bottom half of the page aligned to the right, not aligned directly below the cooresponding tab ?

I see I can change it to "right" position (line 17), but when I do that, the first tab's content looks okay, but the second tab's content starts below where the first tab's content had appeared. I need each tab's content to start at the top.

Thanks

** Nevermind, I figured it out . . . thanks again for the help!

Kor
04-22-2005, 09:33 AM
One question, though, can I set it up so the tab content appears on the bottom half of the page aligned to the right, not aligned directly below the cooresponding tab ?

You may set the tabs wherever you want. The code is fully dynamic, as it gets the real position of each tab, nomatter where you put them, nomatter if you insert them into tables, divs, left align, right align or whichever. Give it a try



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum