Pragmatism in the real world

Dynamic JavaScript Tabs

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!

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="abs.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!

Update: I’ve created a separate page to hold the download link

12 thoughts on “Dynamic JavaScript Tabs

  1. Arrgghh,

    Anyone know how to have 2 different sets of tabs on the same page.

    It would be much appreciated if someone could tell me.

  2. Is there anyway to set an active tab? lets say you wanted a form in one tab and when the user presses submit, you want them to stay on that tab.

  3. emehrkay: the last line of tabs.js controls which tab is set to active.

    i.e. ActivateTab(0); set's the first tab as active, but ActivateTab(1); would set the second tab as the active one.

  4. What do I do with the patch file, there seems to be bits everywhere and loads of @'s and +'s .

    Is there some sort of program i use to interpret this file ?

  5. Rob: how would i make it dynamic? like could i add an onclick even to the h1 tag that sets ActivateTab() to its number, incase the page is refreshed?

  6. The way we do it at work is to call ActivateTab() at the bottom of the php template like this:

    <script language="javascript">
        ActivateTab(<?php echo $tab_id ?>);
    </script>

Comments are closed.