Can you give me a small code example of this?
This isn't for tabs, but the concept is the same. Save the below as an HTML
file and then open in your browser to see how things work...
============================================================================
==
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Javascript DIV toggle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language=javascript type='text/javascript'>
// Toggle function graciously provided by Mick White
// be sure to change the path to the close.gif file to match your directly
setup
function toggle(id){
var toggleLink = id + 'Toggle';
if(document.getElementById){
document.getElementById(id).style.display=
document.getElementById(id).style.display == "block"? "none":"block"
document.getElementById(toggleLink).style.backgroundImage=
document.getElementById(id).style.display == "block"?
"url(close.gif)":"url(open.gif)"
return;
}
}
function hideTextBlock(id){
if(document.getElementById){
document.getElementById(id).style.display = "none"
return;
}
}
function writeOutToggleLink(spanID, id, linkedText){
document.getElementById(spanID).innerHTML = '<a href="javascript:void(0)"
onClick="toggle(\'details' + id + '\')" id="details' + id + 'Toggle"
class="detailsToggleLink">' + linkedText + '</a>'
}
//============================================================
</script>
<style type="text/css">
..details {
text-align: left;
background-color: #ffc;
padding: 10px;
border: 1px solid #cc9;
padding: 5px;
}
/* the open.gif is an icon that shows before the link to indicate that the
text block is now visible */
a.detailsToggleLink, a.detailsToggleLink:hover, a.detailsToggleLink:visited,
a.detailsToggleLink:active {
background: url("open.gif");
color: #666;
text-decoration: none;
border-bottom: 1px dashed #999;
background-repeat: no-repeat;
background-position: 0px 2px;
padding-left: 12px;
}
/* the following styles are just for this page...not needed for the
javascript to work */
body {
background-color: white;
font-family: verdana;
line-height: 150%;
padding: 15px 10%;
}
code {
font-family: monospace;
background-color: #FFFFCC;
border: 1px solid #666;
padding: 10px;
margin: 10px 30px;
display: block;
}
</style>
</head>
<body onload="writeOutToggleLink('appleToggleSpan', 'Apple', 'Tell me
more');hideTextBlock('detailsApple');writeOutToggleLink('orangeToggleSpan',
'Orange', 'Tell me more');hideTextBlock('detailsOrange');">
<h1>Javascript DIV toggle</h1>
<div class="content">
<h3>How this works</h3>
<p>Javascript is used to change the style sheet on the fly for each hidden
block of text. By default, it is set to display: hidden. The javascript link
changes it to display: block, thereby making it visible on the page</p>
<p>This has been tested in IE 6/PC and Firefox. It may not work on other
browsers.</p>
<p>For each block of text you want to show/hide, you need a 'toggle' link to
call the javascript function that, in turns, changes the CSS of the text
block so that it becomes visible or not visible:
</p>
<code><a href="javascript:void(0)"
onClick="toggle('details[ID]')" id="details[ID]Toggle"
class="detailsToggleLink">Tell
me more</a></code>
<p>HOWEVER, we will not actually be placing the above HTML link in our
source code. Instead, we're going to insert the above link via javascript
into an empty SPAN tag. Each 'tell me more' link is actually an empty SPAN
tag. When the page loads, IF the person has javascript, these SPAN tags get
filled with the toggle link that shows/hides the block of text. (if you
don't have javascript, then the toggle links wouldn't do anyting, so there
is no point in showing them to folks that don't have javascript):</p>
<code> <span id="[id]ToggleSpan"></span></code>
<p>And each block of content you want toggled on and off will have be
wrapped in a div that looks like this:</p>
<code><div id="details[ID]"
class="details"></code>
<p>For each toggle set (link + block of text) you need to replace the
'[ID]' in the above code with a unique word. This allows the main javascript
function to uniquely identify each set an only enact upon that particular
set at a time.</p>
<p>Then, to put it all together, we need to call some events in the BODY
tag when the page loads. For each set of toggle links + text block, we need
to do two things. First, we need to insert the HTML link into the empty SPAN
tags. Secondly, we need to hide the text boxes when the page first loads. We
do this so that if a person doesn't have javascript, they don't see the
links, and the text isn't hidden from them.</p>
<code> <body onload="writeOutToggleLink('[ID]ToggleSpan', 'Apple',
'Tell me more');hideTextBlock('details[ID]');"></code>
<p>The above functions are written as such:</p>
<p>writeOutToggleLink(the ID of the span you want the link inserted into,
the keyword you are using for this set, the actual text of the link)</p>
<p>hideTextBlock(the DIV ID of the text block)</p>
<p>You will need to call each of those functions for each of the sets of
links/textblocks that you have on the page.</p>
<hr>
<p>Sample Link 1 (using ID of 'Apple')
<span id="appleToggleSpan"></span></p>
<div id="detailsApple" class="details">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.</div>
<p>Sample Link 2 (using ID of 'orange') <span
id="orangeToggleSpan"></span></p>
<div id="detailsOrange" class="details">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.</div>
</div>
</body>
</html>
