Small recipe for creating vertical tabs. (Vertical means that tab labels are located one under another and not in a horizontal row.) It is quite ugly, but it works well in Firefox and IE (other browsers were not checked, probably there it works, too). It uses PrototypeJS library, but all the manipulations can be done avoiding it.

1. Create CSS for tabs decoration:
   
   table.vt {
   width: 100%;
   padding: 0px;
   border-collapse: collapse;
   border: 0px;
   }

   table.vt td {
   vertical-align:top;
   }

   div.tab-label {
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-bottomleft: 5px;
   margin:0px;
   padding: 0.3em 0.3em 0.3em 1em;
   position:relative;
   right: -1px;
   top: -2px;
   // top: -1px;
   cursor: pointer;
   // cursor: hand;
   }

   div.tab-content {
   margin: 0px;
   padding: 3px;
   }

2. Write JS functions for toggling tabs and highlighting labels:
   
   <script type="text/javascript">
   //<![CDATA[
   var activeTabID    =    1;

   function toggleTab(id) {
       $('tab' + activeTabID).setStyle({backgroundColor: '#ffffff'});
       $('tab' + activeTabID).onmouseover    =    function() { hl(this) };
       $('tab' + activeTabID).onmouseout    =    function() { dehl(this) };
       $('tab' + activeTabID + '-content').hide();
       $('tab' + id).setStyle({backgroundColor: '#cccccc'});
       $('tab' + id).onmouseover    =    function(){};
       $('tab' + id).onmouseout    =    function(){};
       $('tab' + id + '-content').show();
       
       activeTabID    =    id;
   }

   function hl(obj) {
       obj.style.backgroundColor    =    '#eeeeee';
   }

   function dehl(obj) {
       obj.style.backgroundColor    =    '#ffffff';
   }
   //]]>
   </script>

3. Write XHTML tags for tabs:
   
   <table class="vt">
       <tr>
           <td style="width: 20%">
               <div id="tab1" class="tab-label" onclick="toggleTab(1);" onmouseover="hl(this)" onmouseout="dehl(this)">Tab 1</div>
               <div id="tab2" class="tab-label" onclick="toggleTab(2);" onmouseover="hl(this)" onmouseout="dehl(this)">Tab 2</div>
               <div id="tab3" class="tab-label" onclick="toggleTab(3);" onmouseover="hl(this)" onmouseout="dehl(this)">Tab 3</div>
           </td>
           <td style="border: 1px solid #cccccc;">
               <div id="tab1-content" class="tab-content" style="display:none;">Blablabla some content for some tab blabla</div>
               <div id="tab2-content" class="tab-content" style="display:none;">pamparam</div>
               <div id="tab3-content" class="tab-content" style="display:none;">yet another content</div>
           </td>
       </tr>
   </table>

4. Activate first tab:
   
   <script type="text/javascript">
   //<![CDATA[
   toggleTab(1);
   //]]>
   </script>

That’s it. As I’ve said it is ugly, it uses Prototype (because out system uses Prototype – so why not use it?), it is constructed using <TABLE>, but it works

P.S. Here is a page with working example described above. 

Viewed 12367 times by 1930 viewers