Simple Tabbed Content


Why organize your content into Tabs?

  • Tabs look good and are a user friendly format.
  • Switching between tabs is very fast.
  • Tabs can reduce the need to scroll on the page.
  • Tabs can reduce the need to navigate to another page.

The code given here is adapted from the jQuery UI Tabs widget. However, this is a minimalist solution, one with no options and one that you can copy-n-paste into place and have it work. The minimum CSS needed to give the tabbed content area its most basic look and function are provided. Because there is less CSS here, you will need to write less CSS to style it to your liking. The content of your tabs will inherit the styles given in your theme, or you can focus on creating the precise look that you want without wasting your time trying to figure out how to override the styling included here.

You may ask why I didn’t just use the jQuery UI Tabs widget. I actually tried and certainly could have done so, but after fooling around with it for a half-a-day, I became convinced there was a better way. The HTML code given in the jQuery UI Tabs widget may look as simple as the HTML code given here, but the widget adds a boat-load of attributes behind the scenes when the page loads, and applies CSS to the HTML much of which may override the default styling provided in your webpage or theme. This in turn is likely to require you to write yet more CSS to override the overrides contained in the widget. It would be okay if you didn’t need to change the look of the tabbed content area provided by the widget, but I think most people will. To do so with the jQuery UI Tabs widget one must figure out how each element is styled in the widget so that you can write the CSS needed to override the CSS in the widget. I found this to be quite tedious and a big waste of my time! I prefer to waste my time developing a simpler time saving solution.

Why did the widget developers make it this way? The jQuery UI Tabs widget comes with a number of options and the documentation to support them, but these options come at a price as I’ve described above. I just want to drop it in and use it! I believe many of you will want that too, and so too will my clients.

Click each tab to see the HTML, jQuery, and CSS code required to implement Simple Tabs.

Comments are welcome. Let me know if you find this work to be a life saver, or if you think I’m misguided.



Here is the HTML required to implement a tabbed content area on a page.

<div id="sb-tabs">
  <ul>
    <li class="active"><a href="#sb-tab-1">First Tab</a></li>
    <li><a href="#sb-tab-2">Second Tab</a></li>
    <li><a href="#sb-tab-3">Third Tab</a></li>
  </ul>
 
  <div id="sb-tab-1" class="active" style="display:block";>
    . . . This is the content of the first tab . . .
  </div>
 
  <div id="sb-tab-2">
    . . . This is the content of the second tab . . .
  </div>
 
  <div id="sb-tab-3">
    . . . This is the content of the third tab . . .
  </div>
 
</div><!-- end of div#sb-tabs -->

You can copy-n-paste the above HTML code directly into your HTML file to get started. Then change the tab labels and replace the content areas with your content.

You may add a tab by duplicating an existing <li>, change its href (to “#sb-tab-4” for example) and label, and duplicate a <div> construct and change its id to match the href.



Here is the jQuery code that drives the TABS functionality.

<script>
jQuery( document ).ready(function($) {
  var sbTabsID = "#sb-tabs";
  $(sbTabsID + " > ul > li > a").click(function() {
    var inOut = "1000";
    var xLink = $(this).attr("href");

    $(sbTabsID + " > ul > li.active").removeClass("active");
    $(sbTabsID + " > div.active").slideUp(inOut).removeClass("active");

    $(this).parent().addClass("active");
    $(sbTabsID + " > div" + xLink).slideDown(inOut).addClass("active");

    return false;
  });
});
</script>

Add this code to the <head> section of your webpage. Be sure it is preceded by pulling in a jQuery library with a statement similar to that which follows.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Here is the CSS required to support the TABS functionality. That’s all there is to it.

#sb-tabs > ul {
 padding: 0 5px;
 margin: 0;
 margin-bottom: -1px;
 white-space: nowrap;
 overflow: auto;
}

#sb-tabs > ul > li {
 display: inline-block;
 list-style-type: none;
 margin: 0 5px;
}

#sb-tabs > ul > li a {
 display: block;
 text-decoration: none;
 line-height: 1.5em;
 padding: 0 1em;
 border: 1px solid #eee;
 border-top-left-radius: 0.5em;
 border-top-right-radius: 0.5em;
 background: #eee;
 box-shadow: 3px 3px 5px #ccc;
}

#sb-tabs > ul > li.active a {
 border-bottom-color: #fff;
 background: #fff;
 box-shadow: 5px 5px 5px #ccc;
}

#sb-tabs > div {
 display: none;
 background: #fff;
 border-top: 1px solid #eee;
}

#sb-tabs > div.active {
 display: block;
}

The tabs you see here have had CSS added to what is shown above to improve their appearance here. This is shown below. Using only the above CSS their appearance will be dictated by the theme for your website or page.

#sb-tabs {
 border: 1px solid #ccc;
 padding: 5px 10px;
 background-color: #eee;
}

#sb-tabs > ul {
 padding-top: 5px;
}

#sb-tabs > ul > li.active a {
 box-shadow: 1px 1px 5px #999;
}

#sb-tabs > div {
 border: 1px solid #ccc;
}

Sorry, comments are closed for this post.