...

View Full Version : HTML Tabbed DIV



Ashkwil
06-08-2012, 05:14 PM
Hi guys I was hoving trouble getting a tabbed div box to work. It will be running on a Webs hosting which doesnt allow some Java for some reason and this is the only type I've found that works so far on it!

Id simply like to add one more tab to it! There is currently 3 and I'd like 4 but im having trouble, could someone take a look at my code and show me how to add another tab?

My Code:

<!-- Start tab panel code generated at http://www.willmaster.com/ -->
<!-- CSS definitions may be modified. -->
<style type="text/css">
.TP_1339171845_tabTD {
text-align:center;
width:150px;
height:20px;
padding:0px;
border-top-style:solid;
border-top-color:black;
border-top-width:1px;
cursor:pointer;
}
.TP_1339171845_leftRule {
border-left-style:solid;
border-left-color:black;
border-left-width:1px;
}
.TP_1339171845_rightRule {
border-right-style:solid;
border-right-color:black;
border-right-width:1px;
}
.TP_1339171845_tab {
height:20px;
text-align:center;
padding:0px;
cursor:pointer;
}
.TP_1339171845_tabhood {
width:150px;
background-color:#2d2d2d;
color:#FFFFFF;
}
.TP_1339171845_tabbonnet {
width:150px;
background-color:#272727;
color:#FFFFFF;
}
.TP_1339171845_tabcontent {
text-align:left;
width:922px;
border-style:solid;
border-color:black;
border-width:1px;
margin:0;
padding:10px;
}
.TP_1339171845_tabdivcontent {
overflow:visible;
margin:0;
padding:0;
}
</style>

<!-- Tab content and panel content may be edited. -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>

<td id="TP_1339171845_TAB1" class="TP_1339171845_tabTD TP_1339171845_leftRule">
<div id="TP_1339171845_tab1hood" class="TP_1339171845_tab TP_1339171845_tabhood" onclick="TP_1339171845_ManageDisplay(1)">
Full Valet
</div>
<div id="TP_1339171845_tab1bonnet" class="TP_1339171845_tab TP_1339171845_tabbonnet" onclick="TP_1339171845_ManageDisplay(1)">
Full Valet
</div>
</td>

<td id="TP_1339171845_TAB2" class="TP_1339171845_tabTD TP_1339171845_leftRule">
<div id="TP_1339171845_tab2hood" class="TP_1339171845_tab TP_1339171845_tabhood" onclick="TP_1339171845_ManageDisplay(2)">
Interior Valet
</div>
<div id="TP_1339171845_tab2bonnet" class="TP_1339171845_tab TP_1339171845_tabbonnet" onclick="TP_1339171845_ManageDisplay(2)">
Interior Valet
</div>
</td>

<td id="TP_1339171845_TAB3" class="TP_1339171845_tabTD TP_1339171845_leftRule TP_1339171845_rightRule">
<div id="TP_1339171845_tab3hood" class="TP_1339171845_tab TP_1339171845_tabhood" onclick="TP_1339171845_ManageDisplay(3)">
Mini-Valet
</div>
<div id="TP_1339171845_tab3bonnet" class="TP_1339171845_tab TP_1339171845_tabbonnet" onclick="TP_1339171845_ManageDisplay(3)">
Mini-Valet
</div>
</td>

<td width="472">&nbsp;</td>

</tr>

<tr>
<td valign="top" colspan="4" class="TP_1339171845_tabcontent">

<div id="TP_1339171845_content1" class="TP_1339171845_tabdivcontent">
<style type="text/css">
.PRICETABLE {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-align: center;
border: 1px;
border-color: #999;
color: #CCC;
}
.PRICETABLE2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #CCC;
}
</style>
<ul class="PRICETABLE2"><li>Exterior Wash
<li> Remove Traffic Film & Bugs
<li>Chamois Bodywork Dry
<li> Alloy Wheels Cleaned
<li> Wheel Arches Cleaned & Dressed
<li>Exterior Steam Clean
<li> Tar Spots Removed
<li>Tyres Conditioned & Dressed
<li> Exterior Polished By Hand (with auto glym super resin)
<li>Chrome Cleaned
<li> Door Shuts & Sills Cleaned
<li>Windows & Mirrors Cleaned
<li> Vacuum Seats, Carpets & Boot
<li>Shampoo Seats, Carpets & Boot
<li> Door Panels Cleaned & Dressed
<li> Floor Mats Cleaned
<li>Ashtrays Emptied & Cleaned
<li> Interior Trims Door Cleaned & Conditioned
<li>Dashboard & Centre Console Cleaned (auto glym super sheen)
<li> Head Cloth Cleaned
<li> Leather Cleaned & Treated (with auto glym leather conditioner)
<li> Air Vents Dusted and Cleaned</ul>
<table width="450" bgcolor="#2d2d2d" class="PRICETABLE" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">Small cars</th>
<th scope="col">Medium Cars</th>
<th scope="col">Large cars</th>
</tr>
<tr>
<td>From 50</td>
<td>From 60</td>
<td>From 70</td>
</tr>
</table>

</div>

<div id="TP_1339171845_content2" class="TP_1339171845_tabdivcontent">
<style type="text/css">
.PRICETABLE {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-align: center;
border: 1px;
border-color: #999;
color: #CCC;
}
.PRICETABLE2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #CCC;
}
</style>
<ul class="PRICETABLE2">
<li> Door Shuts & Sills Cleaned

<li>Windows & Mirrors Cleaned <li> Vacuum Seats, Carpets & Boot

<li>Shampoo Seats, Carpets & Boot <li> Door Panels Cleaned & Dressed
<li> Floor Mats Cleaned
<li>Ashtrays Emptied & Cleaned
<li> Interior Trims Door Cleaned & Conditioned
<li>Dashboard & Centre Console Cleaned
&amp; Conditioned<li> Head Cloth Cleaned
<li> Leather Cleaned & Treated (with auto glym leather conditioner)
<li> Air Vents Dusted and Cleaned</ul>
<table width="450" bgcolor="#2d2d2d" class="PRICETABLE" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">Small cars</th>
<th scope="col">Medium Cars</th>
<th scope="col">Large cars</th>
</tr>
<tr>
<td>From 25</td>
<td>From 30</td>
<td>From 35</td>
</tr>
</table>
</div>

<div id="TP_1339171845_content3" class="TP_1339171845_tabdivcontent">
<style type="text/css">
.PRICETABLE {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-align: center;
border: 1px;
border-color: #999;
color: #CCC;
}
.PRICETABLE2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #CCC;
}
</style>
<ul class="PRICETABLE2"><li>Exterior Wash
<li> Remove Traffic Film & Bugs
<li>Chamois Bodywork Dry
<li> Alloy Wheels Cleaned
<li> Wheel Arches Cleaned
<li>Tyres Conditioned & Dressed
<li>Chrome Renovated<li> Door Shuts & Sills Cleaned
<li>Windows & Mirrors Cleaned
<li> Vacuum Seats, Carpets & Boot
<li> Door Panels Steam Cleaned
<li> Floor Mats Cleaned
&amp; Conditioned<li>Ashtrays Emptied & Cleaned
<li> Interior Trims Door Cleaned
<li>Dashboard Steam Cleaned<li> Air Vents Dusted and Cleaned
</ul>
<table width="450" bgcolor="#2d2d2d" class="PRICETABLE" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">Small cars</th>
<th scope="col">Medium Cars</th>
<th scope="col">Large cars</th>
</tr>
<tr>
<td>From 30</td>
<td>From 30</td>
<td>From 35</td>
</tr>
</table>

</div>
</td></tr></table>

<!-- JavaScript should not be modified. -->
<script type="text/javascript" language="JavaScript">
var idlist = new Array();
function TP_1339171845_ManageDisplay(which) {
for(var i = 1; i <= 3; i++) {
if(i == which) {
document.getElementById('TP_1339171845_tab'+i+'hood').style.display = "block";
document.getElementById('TP_1339171845_tab'+i+'bonnet').style.display = "none";
document.getElementById('TP_1339171845_content'+i).style.display = "block";
document.getElementById('TP_1339171845_TAB'+i).style.color = "#FFFFFF";
document.getElementById('TP_1339171845_TAB'+i).style.backgroundColor = "#2d2d2d";
}
else {
document.getElementById('TP_1339171845_tab'+i+'hood').style.display = "none";
document.getElementById('TP_1339171845_tab'+i+'bonnet').style.display = "block";
document.getElementById('TP_1339171845_content'+i).style.display = "none";
document.getElementById('TP_1339171845_TAB'+i).style.color = "#FFFFFF";
document.getElementById('TP_1339171845_TAB'+i).style.backgroundColor = "#272727";
}
}
}
function TP_1339171845_Initialize() {
for(var i = 1; i <= 3; i++) {
idlist.push('TP_1339171845_tab'+i+'hood');
idlist.push('TP_1339171845_tab'+i+'bonnet');
idlist.push('content'+i);
}
TP_1339171845_ManageDisplay(1);
}
TP_1339171845_Initialize();
</script>



I would appreciate any help!

Thanks,
Ash :)

Lerura
06-09-2012, 04:34 AM
Using tables for document structure is BAAAD.

But if you want to have it this way:
duplicate the td with id="TP_1339171845_TAB3"
rename the id's to
TP_1339171845_TAB4
TP_1339171845_tab4hood
and
TP_1339171845_tab4bonnet

and remove: TP_1339171845_rightRule
from the class of TAB3
-------
Likewise: duplicate the div with id="TP_1339171845_content3"
rename the id to
TP_1339171845_content4
---------
in the first td of the next tr:
change:
colspan="4"
to
colspan="5"
-------
And last:in the last 2 functions:
change
for(var i = 1; i <= 3; i++) {
to
for(var i = 1; i <= 4; i++) {



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum