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

32 thoughts on “Dynamic JavaScript Tabs

  1. 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!

  2. 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.

  3. 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

  4. 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)

  5. 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.

  6. 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

  7. Hello, Firstly, thank you for making this code available :-) It is so easy to implement, I am experimenting with it at the moment but I have hit a problem. When I load the page which contains the tab section it all works fine but then if I navigate away from that page but then go back to it the tabs stop working and all the tab containers are visible on top of one another and there are no tab headers there. No matter how many times I refresh the page they wont work? Does anyone know why this is? Is it something to do with the JS file not loading everytime? The website url is http://www.hm-designs.co.uk/crossland/solo.php if you click on solo name 1 at the top of the left hand column you will see where I have implemented the tabs. Thank you for any help anyone can give , Helen

  8. I would like to add another feature to this that hides the contents when you double-click the any one of the tabs.

    Any ideas?

  9. Is it possible to load an external URL into one of the tabs in an iFrame? I’m trying to but it screws it up and no tabs appear.

    Thanks.

  10. By the way thanks for creating this tabs. It’s the easiest by far I’ve implemented. Just wondering how versatile it is.

  11. I figured it out…it’s using the tags. I forgot to close the tabs hence why it wasn’t working before. Don’t forget to close your tags in this case

  12. How do I handle the tabs wrapping? In firefox, it doesn’t seem to handle that very well. The second row of tabs jump around depending on which tab I made active.

    my page will be deployed to different locations and each location will have different amount of tabs based on their location so I have no way to hard code this. I currently have javascript to create the tags and the customer just has to populate an array. I don’t want them to see this menu jump around like this.

  13. Hi Sir,
    Thanks for the script. Genericly it works wonders. I tried to add two spans in a p tag to the tab-container-2 so that when span id=viewbydate is clicked the tabs innerText and title.nodeValue would be fetched from the childNodes of the tabs which happen to be tables placed in the p tags of class=tab-content.
    The alerts tabs[i].childNodes[0].outerHTML show up correctly but the html doesn’t change. It looks like I’d have to create a complete reBuildTabs function for the html to change. Since the tabs in tab-container-2 are invoice tables the second span id=viewbynumber would have to rebuild the tabs to. Any advice greatly appreciated. I’m getting the ordernumber from a td in the invoice table via dom childNodes.

  14. Hey Rob,
    I’m closer and have added BuildTabs(‘tab-container-2′);
    ActivateTab(‘tab-container-2′, 0); to my viewbydate onclick function but the old tabs remain even though I added tabs[i].parentNode.removeChild(tabs[i]); it still produced 1 active old tab and 2 inactive old tabs, 1 active new tab and 2 inactive new tabs. I’m thinking I’ll have to use style display none but I’d much rather the tabs be gone. Any advice greatly appreciated.

  15. Acctualy tab[i].style.display=’none’;
    has no affect because it doesn’t overide the display property in BuildTabs(‘tab-container-2′). So It looks like I would have to create a reBuildTabsByDate(‘tab-cotainer-2′)?

  16. Hey I had everything working fine with the tabs but now I’m getting error: object doesn’t suport this property or method pointing to
    “tabs = getChildElementsByClassName(tabContainer, ‘tab-item’);”
    I don’t understand why it was working yesterday and today it’s on the fritz. First I thought it was because I moved the html from a file environment to a thumb drive server environment but switching back still drew the new error. I changed the “for(i=0;” to “for(var i=0;” thinking it was an IE8 js platform thing but that didn’t get the error to stop either.
    Guess It would be a prity cold day in H-E Double Tooth Picks before I got a responce or suggestion as I have no real way of knowing how I managed to screw it up.

  17. Wow, I fixed it, I had mistakenly added an id “id=’tabs’” to the script tag that screwed up the whole program. From now on the script tag id’s will not match any of the html tags! something like “id=’blank’” and “id=’blank1′” and “id=’blank2′”.

Comments are closed.