I'm currently working on a little project and I did this tutorial on a 'dynamic tabbed box' which i fill with list items dynamically form a db. and its all worked fine, thats because the tutorial used 6 tabs and i used 6 tabs! but on a different page I've implemented it on, I need 8 tabs. These last 2 tabs now appear under the first tab when the page is originally loaded! when you select 'tab b' then go back to the first tab it only shows the content i want on there, but like i said when you originally load the page, the last 2 tabs appear under the content that should be on 'tab a'...
my code for the tabbed box is ...
<ul class="tabs">
<li><a href="#ATP_Singles" title="content_1" class="tab active">ATP Singles</a></li>
<li><a href="#ATP_Doubles" title="content_2" class="tab">ATP Doubles</a></li>
<li><a href="#WTA_Singles" title="content_3" class="tab">WTA Singles</a></li>
<li><a href="#WTA_Doubles" title="content_4" class="tab">WTA Doubles</a></li>
<li><a href="#ITF_Boys" title="content_5" class="tab">ITF Boys</a></li>
<li><a href="#ITF_Girls" title="content_6" class="tab">ITF Girls</a></li>
<?php if (logged_in()){
?>
<li><a href="#add" title="content_7" class="tab">Add</a></li>
<li><a href="#update" title="content_8" class="tab">Update</a></li>
<?php
}
?>
</ul>
<div id="content_1" class="content"><?php include 'includes/tennis/atp_singles.php'; ?></div>
<div id="content_2" class="content"><?php include 'includes/tennis/atp_doubles.php'; ?></div>
<div id="content_3" class="content"><?php include 'includes/tennis/wta_singles.php'; ?></div>
<div id="content_4" class="content"><?php include 'includes/tennis/wta_doubles.php'; ?></div>
<div id="content_5" class="content"><?php include 'includes/tennis/itf_boys.php'; ?></div>
<div id="content_6" class="content"><?php include 'includes/tennis/itf_girls.php'; ?></div>
<?php if (logged_in()){
?>
<div id="content_7" class="content"><?php include 'includes/tennis/add.php'; ?></div>
<div id="content_8" class="content"><?php include 'includes/tennis/update.php'; ?></div>
<?php
} ?>
</div>
the code i have included for the jquery is ...
function tabSwitch(new_tab, new_content) {
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById('content_4').style.display = 'none';
document.getElementById('content_5').style.display = 'none';
document.getElementById('content_6').style.display = 'none';
document.getElementById('content_7').style.display = 'none';
document.getElementById('content_8').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById('tab_4').className = '';
document.getElementById('tab_5').className = '';
document.getElementById('tab_6').className = '';
document.getElementById('tab_7').className = '';
document.getElementById('tab_8').className = '';
document.getElementById(new_tab).className = 'active';
}
function tabSwitch_2(active, number, tab_prefix, content_prefix) {
for (var i=1; i < number+1; i++) {
document.getElementById(content_prefix+i).style.display = 'none';
document.getElementById(tab_prefix+i).className = '';
}
document.getElementById(content_prefix+active).style.display = 'block';
document.getElementById(tab_prefix+active).className = 'active';
}
in the jquery, the 2 extra ('tab_7') & ('tab_8') parts to it all i are the things ive added, ive tried finding the original tutorial but i cant find it to resort back to for advice or anything so is there someone that can help and advise?