jQuery as Structure - Tabs for Content

Part 3

So far, I haven’t talked much about the jQuery Tabs structure. It is one of those constructs that can hold a lot of information and present it in a very compact form.  It is also an excellent way to organize your content so visitors will be able to find what they are looking for.  

jQuery Tabs are comprised of a containing div with a UL that links to named divs, as shown here:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tabs-1</a></li>
    <li><a href="#tabs-2">Tabs-2</a></li>
    <li><a href="#tabs-3">Tabs-3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content for #tabs-1</p>
  </div>
  <div id="tabs-2">
    <p>Content for #tabs-2</p>
  </div>
  <div id="tabs-3">
    <p>Content for #tabs-3</p>  
  </div>
<!-- end of #tabs --></div>

Tabs are the perfect complement to the Accordion for our web page structure.  All that’s left to do to complete our web page structure is to wrap both widgets into a containing div and center them on the page.  

The CSS for the structure:

#page-wrap {
  width:900px;
  background: #fff;
  margin: 30px auto;
  padding: 20px;
  }
#accordion {
  width: 280px;
  float: right;
        }
#tabs {
  width: 600px;
  float: left;
}
 

The jQuery call to initialize the Tabs widget is simple:

<script type="text/javascript">
  $(function(){

    // Accordion
    $("#accordion").accordion({ event: "mouseover" });

    // Tabs
    $("#tabs").tabs();
    
  });
  </script>

However, as per the jQuery docs, you’ll need some CSS classes for the tabs to work.

.ui-tabs .ui-tabs-hide {
     display: none;
}

Voila! We have a web page that can contain quite a bit of information and interactivity in a very compact format.

If you are using jQuery from Google’s CDN (Content Distribution Network), you can link to the UI CSS needed for the tabs choosing a theme. See more about this at: Encosia.com Blog

Another aspect of these two widgets is that their content can be dynamically loaded. So, by using the Accordion and Tabs widgets, you have built a web page that can act as a shell, with the content being maintained outside the structure. Having the information outside the shell structure, for both the navigation and content, makes for a very dynamic framework.