Side Tabs

Example

Tab 1

Tab 2

Tab 3

Tab 4

Hello World

Hello Again

Whatever

Foo

Requirements

Tested on

The HTML

   1:  <div id="sideTabs">
   2:      <div id="tabMenu">
   3:          <h4 title="tab-1" class="first">Tab 1</h4>
   4:          <h4 title="tab-2">Tab 2</h4>
   5:          <h4 title="tab-3">Tab 3</h4>
   6:          <h4 title="tab-4" class="last">Tab 4</h4>
   7:      </div>
   8:      <div id="tabContent">
   9:          <div id="tab-1">
  10:              <p>Hello World</p>
  11:          </div>
  12:          <div id="tab-2">
  13:              <p>Hello Again</p>
  14:          </div>
  15:          <div id="tab-3">
  16:              <p>Whatever</p>
  17:          </div>
  18:          <div id="tab-4">
  19:              <p>Foo</p>
  20:          </div>
  21:      </div>
  22:  </div> <!-- #sideTabs -->

The CSS

   1:  <style type="text/css" media="screen">
   2:      #sideTabs {width:650px; position: relative;}
   3:      #tabMenu {width:228px; position: absolute; z-index: 1; top:0; left:0;}
   4:      #tabMenu h4 {background: url(images/sideTabs.gif) no-repeat 0 -40px; line-height: 40px; height:40px; color:#fff; margin:0; padding-left:5px; cursor: pointer; border-bottom: none}
   5:      #tabMenu h4:first-child, #tabMenu h4.first {background: url(images/sideTabs.gif) no-repeat 0 0;}
   6:      #tabMenu h4:hover {background: url(images/sideTabs.gif) no-repeat 0 -80px;}
   7:      #tabContent {margin-left:211px;width:422px;}
   8:      #tabContent div {border: 1px solid #999; min-height:300px; height:auto !important; height:300px; padding-left:25px;}
   9:  </style>

The Javascript

   1:  <script type="text/javascript" charset="utf-8">
   2:      $(document).ready(function() {
   3:          // SET THE STAGE ******
   4:          $("#tabContent div").css("display","none")
   5:          $("#tabContent div:first-child").css("display","")
   6:          // INTERACT ******
   7:          $("#tabMenu h4").click(function(){
   8:              //get the ID of the tab that's clicked
   9:              tabID = $(this).attr("title");
  10:              // reset all tab content divs and tab pointers
  11:              $("#tabMenu h4").css("background", "url(images/sideTabs.gif) no-repeat 0 -40px");
  12:              $("#tabContent div").css("display","none");
  13:              // Open the one user clicked on
  14:              $("#"+tabID).css("display","");
  15:              $(this).css("background", "url(images/sideTabs.gif) no-repeat 0 0");
  16:          })
  17:      });
  18:  </script>