Back to menu

jQuery Tabbed Element Plugin

Preamble

We all love tabs, right? They make it easier to display small amounts of data in a structured manner. But they can also hurt usability, especially if the data becomes largely innacessible if the user doesn't have JavaScript enabled. This tab plugin relies on the data already being on the page and arranged in a vaguely sensible manner before it will actually bind to your elements. So if your user doesn't have JavaScript enabled, they see the data exactly as you arranged it. Huzzah!

Also, no CSS theming is applied, merely classnames, so it's up to you not just how you colour your tab widget, but also how you arrange it! That means you can have the headings whereever you want, oriented whereever you want, etc. Huzzah again.

You can use this therefore to create a pretty obvious tabbed element system (e.g. see my root page) which will impress your visitors with its shamelessly flashy existence, or, you can opt to quietly impress them with the usability improvements you can bring by using it to arrange data in much more subtle ways. See for example, my loljs interpreter page, which uses tabify to compartmentalise the 'Show: input, JavaScript ... about' headings, and also, to separate pages in the cheatsheet.

Example Usage

<script>
$(document).ready(function() {
  // the premise is that we arrange all our tabs and all our headings within
  // a pair of containers. Then we tell tabify about the containers and it 
  // looks at the immediate child elements and does the rest.
  $('#tabs').tabify($('#menu'), true); // the second argument controls whether
    // or not to use back-forward button emulation. Set this to false if you're
   // using more than 1 tabbed element per page.
});
</script>

<div id='menu'> 
  <span>go to tab 1</span>
  <span>go to tab 2</span> 
  <span>go to tab 3</span> 
</div>

<div id='tabs'>
  <div> tab 1 </div>
  <div> tab 2 </div>
  <div> tab 3 </div>
</div>
 

Download

Download the: full source or minified source

Demo

Simple Usage

View the page without JavaScript to see how the elegant fallbacks work, or don't; it's up to the caller to make sure they're arranged in a visually sensible way before the plugin is invoked. Note that the only real difference between each of these demos is the CSS styling.
Very simple usage, no actual styling applied.

#include <stdio.h>
  
int main() {
  printf("Hello, world\n");
  return EXIT_SUCCESS;
}
document.write('Hello, world<br>');
#!/usr/bin/env python
print 'hello world'

Changing Layout And Style

You can put the headings where you want. Forgive the ugly colours. This might overflow the demo container because it's using floated elements, in which case, sorry.
#include <stdio.h>
  
int main() {
  printf("Hello, world\n");
  return EXIT_SUCCESS;
}
document.write('Hello, world<br>');
#!/usr/bin/env python
print 'hello world'
And this is perhaps the most traditional example.

#include <stdio.h>
  
int main() {
  printf("Hello, world\n");
  return EXIT_SUCCESS;
}
document.write('Hello, world<br>');
#!/usr/bin/env python
print 'hello world'