Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: HTML Tabbed DIV

  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML Tabbed DIV

    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:
    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

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    878
    Thanks
    0
    Thanked 114 Times in 113 Posts
    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++) {


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •