Tabs

This is a part one in a three part series. This post will cover simple tabs made with HTML, CSS and JavaScript. I don't use the JQuery UI library, but do use the core here. That said, everything I do here can easily be replaced with simple plain JavaScript. The JQuery just removes (or rather hides) a few simple loops. This will create the tabs that can be seen at the bottom of: http://cms.uwm.edu/letsci/index_860-a.cfm

You can place multiple sets of tabs on single page, reusing the JavaScript and the CSS without modification. Just make sure the containing div on each has a unique ID (Which it should anyway). The spans can be changed to anchor links with link to the individual blocks, which would make this work better when JavaScript is disabled with just minor changes.

The two follow up posts that are coming will be a rotating news banner that doesn't require Flash, and finally rotating tabs using the material from the two other posts.

The HTML:

  <!--- Change id of this outter div for each instance you place on a single page --->
  <div class="slider" id="slider1">
  <!--- The Tabs Note the rel attribute on each of the tabs.Used in the JavaScript --->
  <span class="slidebutton" rel="1">Student News</span>
  <span class="slidebutton" rel="2">Faculty News</span>
  <span class="slidebutton" rel="3">Research News</span> 
  <!--- A handle for a bit of javascript styling. --->
  <div class="posttabs">&nbsp;</div>
  <!--- 
    First news story, note the rel attribute matches the rel of the tab.
    Technically they don’t have to be numbers, they could be meaningful or descriptive.
  --->
  <div class="sliderpane" rel="1">
    <p class="storytext"><strong>Dilano Saldin, Physics</strong><br />
    Physics Professor Dilano Saldin is the lead author of "New light on disordered ensembles: Ab   
    initio structure determination of one particle from scattering fluctuations of many copies," an 
    article that was featured in the Viewpoint section of the journal, Physics.</p>
    <img src="http://cms.uwm.edu/letsci/images/dilano1.png" alt="professor Dilano Saldin" 
      height="140" width="130" /> 
    <div class="clear">&nbsp;</div>
  </div>
  <div class="sliderpane" rel="2">This is two. 
    <div class="clear">&nbsp;</div>
  </div>
  <div class="sliderpane" rel="3">This is three. 
    <div class="clear">&nbsp;</div>
  </div>
  <div class="sliderpane" rel="4">This is four. 
    <div class="clear">&nbsp;</div>
  </div>
</div>

The CSS:

.slidebutton 
{
  display: block;
  text-align:center;
  border:1px solid white;
  border-bottom:none;
  float:left;
  /* 
    One third is 33%, because we have three tabs.  removed the 3% for room on the right.
    If you had 4 tabs, you’d start with 25% and then remove some for breathing room.
  */
  width:30%;
  background: none repeat scroll 0% 0% #fcd204;
  /* CSS 3 rounded corners */
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  /* Line the first tab up with the news box bellow */
  position:relative;
  right:2px;
}
.active
{
  background: rgba(204,204,204,.7);
}
.sliderpane 
{
  font-size:12px;
  background: rgba(204, 204, 204,.7);
  height:140px;
/*
     Move the news box up to cover the tab bottoms, so it looks like 
    one piece and hides the lower rounded corners on 
  position:  relative;
  top:  -2px;
  /* CSS 3 rounded corners */
  border-radius: 5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}
.clear {height:1px; width:100%;} 
/* 
  For CMS or other floats, so we don’t clear left nav or right hand column.  
  If that isn’t a consideration: 
  .clear {clear: both;} 
*/
.buttons {margin:3px;}
.storytext1 {float: right; width:428px;}
.storytext  {float: right; width:298px;}

Finally the JavaScript

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
<script type="text/javascript">  
        //When the page loads, show only the first panel’s content.
        $(".sliderpane").css("display","none");
        $('.sliderpane[rel="1"]').css("display","block");

        //Change the tab of the first story to show that it is active.
        $('.slidebutton[rel="1"]').attr('class','slidebutton active');

        // Quick javascript formatting, not the right place to do it, but it works for I wanted.
        $('.posttabs').height($('.slidebutton').height()+2);

        // When a tab is clicked
        $(".slidebutton").click( function()
        {
          // Get ID of the parent div of the tab that was clicked
          // This allows the script to run multiple tab instances on a single page.
          // This does means the tabs and the panels (tab content) have to share the same parent. 
          id = $(this).parent().attr('id');
          // Get the rel, so we can show the proper panel. 
          num = $(this).attr('rel');
          // Change all tabs styled to look like they don’t have focus 
          // -- i.e. un-highlight the previous item
          $(".slidebutton").attr('class','slidebutton');
          // Highlight the new active tab
          $(this).attr('class','slidebutton active');
          // Hide all the panels -- i.e. hide the previous active item
          $('#' + id + ' .sliderpane').css("display","none");
          // Show the new active panel (tab content)
          $('#' + id + ' .sliderpane[rel="' + num + '"]').css("display","block");
        });
</script>