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!

Download

dynamic_tabs_1.0.3.zip

Subversion

The very latest version of the code is in my subversion repository at: http://svn.akrabat.com/svn/dynamic_tabs/trunk/

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

17 Responses to “Dynamic JavaScript Tabs”

  1. 1 Axsuul

    Thanks alot of coming up with this. Works flawlessly.

  2. 2 .

    good work

  3. 3 Rob...

    Thanks guys.

  4. 4 Triet Vo

    Good job!
    It's, however, should come along with more document because not everyone can dig into your code and understand all.
    But this is really a dynamic tab strip!

  5. 5 Matt

    Wow Rob, This is really cool!

  6. 6 Rob...

    Thanks Matt!

  7. 7 Chilev

    nice... thanks a lot!

  8. 8 Rark

    Good script.

    In the example above...
    Last line....

    tabs.js is spelt wrong

  9. 9 Rob...

    Thanks Rark!

    Regards,

    Rob...

  10. 10 Phil

    Our clients have been using these tabs for many years and now there has been a request to round the tab corners. Do you have a version that would round the corners or at least point me in the right direction. Hopefully, we can do this without images.

    Thanks in advance for your help.

  11. 11 Rob...

    Phil,

    I would use images :)

    Rob...

  12. 12 Daquan Wright

    This rocks, works well.

    I only wish someone would show how to create the JavaScript and CSS formatting that goes along with it so that I could write my own from scratch. But now I guess that's asking for too much, now isn't it? =P

  13. 13 worried user

    anyone else notice that google maps screw up in this? they kind of dissapear to the left bihind itself. Well it's ok in IE but not firefox or safari!! I take out the tabs.js script and it works fine!! (but all tabs show again)

  14. 14 raimundas

    Thanks. Its seams working good.
    How to open second tab after refresh?

  15. 15 meserlian

    excellent stuff exactly what i was looking for, but have a tiny problem, it wont let me add more than 5 tabs, they would start overlapping.
    ive changed the CSS to be smaller in text size and so on, there is space for another tab, it just doesn't go.

  16. 16 meserlian

    never mind i am noob just did it :) thanks for the code

  17. 17 Shanda Deptula

    Hi, I found this post while searching for help with JavaScript. I've recently switched browsers from Safari to Internet Explorer 7. Just recently I seem to have a problem with loading JavaScript. Everytime I go on a site that requires Javascript, my computer freezes and I get a "runtime error javascript.JSException: Unknown name". I can't seem to find out how to fix the problem. Any aid is greatly appreciated! Thanks

The views expressed in these comments are not the views of the publisher. However, we believe in the rights of others to express their legitimate views and concerns. Any legitimate complaint emailed to rob@akrabat.com will be seriously considered and the post reviewed as desirable and necessary.

Leave a Reply

Buy now!