Tabs with jQuery

jqueryThere are alot of tab plug-ins for jQuery out there, but just for a simple couple of tabs, I didn’t really see the point of making it that complicated..

Our goal is to create two simple tabs that toggle two divs with each its content.

Here’s what I did:

jQuery must be included in the header of the document. The functions called later on relies on jQuery. They could just as well been written without the jQuery framework, on “naked” javascript, but jQuery makes it all easier and cross-browser supported.

By the way.. jQuery is beautifully created and brilliantly documented. If you don’t know it yet, get to it.

Download jQuery and put it in /js or where ever you prefer.

<script src="/js/jquery.js" type="text/javascript"></script>

To make the page non-javascript friendly we hide one of the two divs with javascript after the page is loaded.

<script type="text/javascript">
<!--
  $(document).ready(
    function(){
      // Client has JS, hide elements
      $('.tab1content').hide();
    });
  //-->
</script>

No javascript support means both divs are always visible to the user.

In this next segment I’ve taken a small shortcut. Optimally the show/hide functions for the content divs should be run based on events declared in the header, like the code above.. As my page is very simple, I just didn’t bother this once. To show/hide the two content divs we have a short one-liner jQuery code.

First we select any DOM-element with class “tab1content” (there’s just one on our page, but it could have been several).

Then we check if the element is hidden (display=none). If that’s the case we first select any DOM-element with class tab1content OR tab2content and  toggle their visibility state.

This might seem mysterious, but toggle is just a handy function provided by jQuery to show/hide any element. If a selected element is hidden and the toggle function is run “on it” it becomes visible and obviously a visible element is hidden.

<div id="Tabs">
  <a href="#" onclick="if ($('.tab1content').css('display')=='none'){$('.tab1content, .tab2content').toggle();};">Tab1</a>
  <a href="#" onclick="if ($('.tab2content').css('display')=='none'){$('.tab1content, .tab2content').toggle();};">Tab2</a>
</div>
<div id="Content">
  <div class="tab1content">
    <p>Whatever goes in the content of tab1</p>
  </div>
  <div class="tab2content">
    <p>Whatever goes in the content of tab2</p>
  </div>
</div>

That’s it.
I’ve stripped down my original code alot so please let me know if I’ve implemented a bug in the process.. Also the code will need some CSS work to look like real tabs.

  1. Finally after going through dozens of different sites I found yours with exactly what I wanted. No idea why it has been so hard to find a post about toggling between two tabs but this is EXACTLY what I was after, Thank you so much :)

  2. After neglecting the blog for a long time it’s real awesome to get a comment like that, Simon, thanks =)

  3. Tabs with jquery.. Amazing :)

  1. March 3rd, 2010