Dynamic JavaScript Tabs

Please note that this code is very old now and I recommend looking at JQuery UI’s tabs instead.

This is some code that I wrote to create dynamic tabs. I use it for forms where I have a lot of fields and a good percentage are “advanced” or otherwise not important enough to have visible immediately. The CSS is based on ideas from Silverorange Labs and the JS code is mine. The code is released under the MIT license which basically means you can do what you like with it as long as you don’t blame me!

Download

dynamic_tabs_1.0.3.zip

Basic tutorial

It’s not hard to use and I’ve included a sample html file in the zip archive. The basics are:

<div id="tab-container">
  <div class="tab-content">
      <h1 class="tab" title="title for page 1">Page 1</h1>
      <p>This is the content of tab 1</p>
  </div>
  <div class="tab-content">
      <h1 class="tab" title="title for page 2">Page 2</h1>
      <p>This is the content of tab 2</p>
  </div>
  <div class="tab-content">
      <h1 class="tab" title="title for page 3">Page 3</h1>
      <p>This is the content of tab 3</p>
  </div>
</div>
<script type="text/javascript" src="tabs.js"></script>

i.e. you need a “tab-container” and then each tab is contained in a “tab-content” and we use a “tab” to sort out the title. The nice thing is that it degrades really nicely!

Change Log

• 22/Mar/2005: version 1.0.0
• • Initial release.
• 28/Mar/2005: version 1.0.1
• • Gracefully handle the case when there is no container id.
• 21/Dec/2005: version 1.0.2
• • Patch from Áncor & Imobach González Sosa to allow for multiple tab containers
• 17/Jan/2006: version 1.0.3
• • Fixed version number at top of file
  • Added this Change Log
  • Fixed CSS as noted by Adam Fortuna of www.dyoit.com
  • Patch from Simon H to add tab ids for other scripts to hook into