I was working on a new web design last night early this morning I found myself struggling (probably more than I should have been) with creating tabbed content switcher (hover over one element changes the content of another). I knew the right way to go was jQuery, and I wanted to avoid downloading a plugin as that would likely end up with more code and another HTTP request to the server. As I was working on the content switcher, I had one of those “Let’s try this and see what it does” moments (those tend to work all to often for me). It turned out that it did half of what I needed, so I removed another line and voila! I had my content switcher. So without further ado, here it is.

The Story

This project was a site I took over from another developer. My responsibilities were to finish the project and clean things up. The previous developer went 95 yards, I needed to put the ball in the end zone. For legal reasons, I can not show a screenshot of the full comp unfortunately. I initially was just going to clean up code and fix validation, CSS, and jQuery. However, I quickly realized that would end up making it harder. So I decided to rewrite the HTML and CSS and duplicate the look and feel of the previous version. An added benefit to rewriting the code my own way, in addition to being more familiar with the code and all the CSS hooks, is that I could focus on reducing code bloat and cut down on the amount of images being used to help deliver a better performing site to the client. Here is a look at the tabs themselves. Hovering over each tab changes the content below:

The HTML

My first goal was to create the tabs and still make them SEO friendly by having all the content actually in the markup, and not added/removed as needed. The markup for the tabs are as follows:

     <div id="main_middle">
      <ul>
       <li id="tab-1"><a href="#" class="active_tab">Tab 1</a></li>
       <li id="tab-2"><a href="#">Tab 2</a></li>
       <li id="tab-3"><a href="#">Tab 3</a></li>
       <li id="tab-4"><a href="#">Tab 4</a></li>
       <li id="tab-5"><a href="#">Tab 5</a></li>
      </ul>
      <p class="active_tab_content">Content 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Content 2 - Mauris ornare suscipit lacus eget lobortis. Vestibulum quis purus metus, sed condimentum magna.</p>
      <p>Content 3 - Nunc et turpis laoreet mi dapibus pulvinar. Nunc a facilisis mauris. Nulla facilisi. Morbi sed volutpat elit. Cras varius sollicitudin mi at imperdiet.</p>
      <p>Content 4 - Ut a consectetur quam. Nulla ut consequat metus. Nunc molestie erat sit amet tortor faucibus elementum. Praesent eu luctus nulla.</p>
      <p>Content 5 - Proin porttitor mattis erat eget ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </div>

As you can see, the HTML is only 14 lines long: a container element, an unordered list, and paragraph elements (one for each tab). This is a far cry from the 47 lines of HTML with divs nested 3 deep the previous developer was using. Additionally, the container has an id as well as each tab, plus a class for the active tab and paragraph and that’s it. This can be done without the id’s, I have them in there for CSS sprite functionality. The active_tab class is not required, again it’s something I use for my sprites.

The CSS

Here is the pertinent CSS to making this work. I have a bunch extra for my sprites, but that’s beside the point:

#main_middle ul li {
 display: -moz-inline-stack;
 display: inline-block;
 zoom: 1;
 *display: inline;
 text-align: center;
 vertical-align: text-top;
}

#main_middle ul li a {
 display: block;
 width: 100%;
 height: 100%;
}

#main_middle p {
 background: url(../images/tab_content_bg.png) 50% 0 no-repeat transparent;
 display: none;
}

#main_middle .active_tab_content {
 display: -moz-inline-stack;
 display: inline-block;
 zoom: 1;
 *display: inline;
}

#main_middle ul #tab-2 a { /* Example of Sprite Usage */
 background-position: -95px 0;
}

#main_middle ul #tab-2 .active_tab { /* Example of Sprite Usage  */
 background-position: -95px -79px;

The display/zoom lines is for cross-browser inline-block display. The code for the anchor elements simply sets them to a block the full size of the list item parent. Next, all paragraph elements are hidden and only the one with the “active_tab_content” class is displayed. The background is set for all the paragraph elements, although I could’ve just as easily set it for just the display content only.

Here is my sprite so you get the idea of what I’m doing with that code:

The jQuery

The biggest problem I was encountering while writing the jQuery was that when the user stops mousing over the tabs, the last tab moused over should remain visible, and not revert back to the “active_tab” and “active_tab_content” tab.

$(function() {
 $("#main_middle ul li a").each(function(index) {
  $(this).hover(function() {
   $("#main_middle ul li a").each(function() { $(this).removeClass("active_tab"); });
   $("#main_middle p").each(function() { $(this).removeClass("active_tab_content"); });
   $(this).addClass("active_tab");
   $("#main_middle p:eq("+index+")").addClass("active_tab_content");
  });
 });
});

The jQuery code loops through each of the anchor elements and assigns a hover function to them. The first thing this hover function does is loops through all anchors (tabs) and all paragraphs (tab content) and removes the classes. It then adds the “active_tab” class to the current tab and the “active_tab_content” class to the respective paragraph. It does this through the use of indexes. One each pass through the anchors, the current element index is passed through the function and then used to select the paragraph with the equivalent index via the eq selector. And that’s it. My mistake that I kept running into, was assigning second function to the hover() to activate on mouseout. This function was removing the classes that were being added. This was my moment of brilliance luck when I removed that code by chance and everything worked.

See the code in action here

You can use this code to make as many tabs as you need. Just make sure you have as many paragraph elements as you do list elements and that the content for list item 1 corresponds with the content for paragraph 1. I used inline tabs, but this can easily be done with vertical tabs as well, the logic is still the same. Feel free to copy/use this code for your own purposes. Share a link to your implementations in the comments below and/or how you would have done this differently. Comments are welcome and enjoyed.

With this GreaseMonkey Script, you set the domain you wish to locate and a highlight color (default is light red) and when you search in Google, Bing, or Yahoo!, results for your website will be highlighted.

Click here to visit the home page for this script
Click here to Install GreaseMonkey
Click here to Install Script
Click here to visit the UserScripts.org page for this script.