PDA

Click to See Complete Forum and Search --> : Tab Panels Code Problem- Please Help!

taracakes1
02-04-2010, 04:27 PM
Hi Y'all...

I am hoping that someone can help me fix some pretty simple code.

I am building a web page that has tab panels that hide and show information depending on which one is selected. I am trying to make horizontal tabs at the top of the page.

I have had some success, however I am having two problems:

The first problem is that one of the tabs doesn't work (specifically tab 4 "videos").

The other is that when you first start up the page, there are three tabs highlighted (1, 4 and 5), however there should only be 1 tab highlighted (tab1).

I have included my code below. Can anyone tell me where my mistakes are?

Thank you!!!



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra:confused:nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="JavaScript"><!--
function ManageTabPanelDisplay() {

var idlist = new Array('tab1focus','tab2focus','tab3focus','tab4focus', 'tab5focus','tab1ready','tab2ready','tab3ready','tab4ready', 'tab5ready','content1','content2','content3','content4','content5');

// No other customizations are necessary.
if(arguments.length < 1) { return; }
for(var i = 0; i < idlist.length; i++) {
var block = false;
for(var ii = 0; ii < arguments.length; ii++) {
if(idlist[i] == arguments[ii]) {
block = true;
break;
}
}
if(block) { document.getElementById(idlist[i]).style.display = "block"; }
else { document.getElementById(idlist[i]).style.display = "none"; }
}
}
//--></script>


<style type="text/css">
.tab {
font-family: verdana,sans-serif;
font-size: 14px;
width: 100px;
white-space: nowrap;
text-align: center;
border-style: solid;
border-color: black;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width: 0px;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
}
.tabhold {
background-color: white;
color: black;
}
.tabfocus {
background-color: black;
color: white;
}
.tabcontent {
font-family: sans-serif;
font-size: 14px;
width: 580px;
height: 275px;
border-style: solid;
border-color: black;
border-width: 1px;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
</style>


</head>

<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="tab1focus" class="tab tabfocus" style="display:block;">Description</div>
<div id="tab1ready" class="tab tabhold" style="display:none;">
<span onclick="ManageTabPanelDisplay('tab1focus','tab2ready','tab3ready','tab4ready','tab5ready','content1 ')">Description</span>
</div>
</td><td width="20"> </td>


<td>
<div id="tab2focus" class="tab tabfocus" style="display:none;">
Images
</div>
<div id="tab2ready" class="tab tabhold" style="display:block;">
<span onclick="ManageTabPanelDisplay('tab1ready','tab2focus','tab3ready','content2','tab4ready','tab5ready ')">Images</span>
</div>
</td><td width="20"> </td>


<td>
<div id="tab3focus" class="tab tabfocus" style="display:none;">
Specifications
</div>
<div id="tab3ready" class="tab tabhold" style="display:block;">
<span onclick="ManageTabPanelDisplay('tab1ready','tab2ready','tab3focus','content3','tab4ready','tab5ready ')">Specifications</span>
</div>
</td><td width="20"> </td>

<td>
<div id="tab4focus" class="tab tabfocus" style="display:block;">
Videos
</div>
<div id="tab4ready" class="tab tabhold" style="display:none;">
<span onclick="ManageTabPanelDisplay('tab1ready','tab2ready','tab3ready','tab4focus','content4',tab5ready' )">Videos</span>
</div>
</td><td width="20"> </td>

<td>
<div id="tab5focus" class="tab tabfocus" style="display:block;">
Pricing
</div>
<div id="tab5ready" class="tab tabhold" style="display:none;">
<span onclick="ManageTabPanelDisplay('tab1ready','tab2ready','tab3ready','tab4ready','content5','tab5focus ')">Pricing</span>
</div>
</td>


</tr>

<tr>
<td colspan="9">

<div id="content1" class="tabcontent" style="display:block;">
<p>
This is where descriptions go!
</p>
</div>

<div id="content2" class="tabcontent" style="display:none;">
<p>
This is where images go.
</p>
</div>

<div id="content3" class="tabcontent" style="display:none;">
<p>
This is where specs go!
</p>
</div>

<div id="content4" class="tabcontent" style="display:none;">
<p>
This is where videos go!
</p>
</div>

<div id="content5" class="tabcontent" style="display:none;">
<p>
This is where pricing goes.
</p>
</div>

</td></tr>
</table>
</body>
</html>
criterion9
02-04-2010, 04:51 PM
<div id="tab4ready" class="tab tabhold" style="display:none;">
<span onclick="ManageTabPanelDisplay('tab1ready','tab2ready','tab3ready','tab4focus','content4','tab5ready' )">Videos</span>
</div>

I couldn't see what is wrong with your other code at first glance. Do you have a live link to look at? Also please use the appropriate tags for code so it is easier to look at. Additionally, this is a javascript issue not an HTML one, please post to the appropriate forum next time (since you are more likely to get a quicker response).