JavaScript Tabs – Create Tabbed Web Pages Easily

17 March 2009 / 305 Comments

This tutorial shows how to create a Web page containing JavaScript-driven tabs. Each tab displays a separate chunk of content when clicked — perfect if your page needs to hold a large amount of content. It’s also great for things such as multi-step (“wizard”-style) Web forms.

Click the link below to see a tabbed page in action:

See JavaScript tabs in action

The JavaScript and markup are coded in such a way that the page degrades gracefully in browsers that don’t support JavaScript.

In this tutorial you learn how this tabbed page is put together. You can then use the code and ideas to build your own tabbed Web pages. Let’s get started!

Creating the HTML for the tabbed page

The HTML for the tabs and content is very simple. You store each tab’s content within a div element with a class of tabContent and a unique id for reference. Here’s the first of the 3 tab content divs in the example:


<div class="tabContent" id="about">
  <h2>About JavaScript tabs</h2>
  <div>
    <p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
    <p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
  </div>
</div>

The tabs themselves are simply links within an unordered list:


<ul id="tabs">
  <li><a href="#about">About JavaScript tabs</a></li>
  <li><a href="#advantages">Advantages of tabs</a></li>
  <li><a href="#usage">Using tabs</a></li>
</ul>

Give the ul an id of "tabs" so that the JavaScript code can locate it. Each link within the list links to its corresponding content div by referencing the id of the div ("about", "advantages", or "usage"). Since these are standard HTML links, they work fine even without JavaScript.

You can add as many tabs as you like to the page. Simply add a new content div and give it a unique id, then add a link to it within the tabs list.

Creating the CSS

Some CSS is needed in order to make the tabs look like tabs (and make them nice to look at):


body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f1f0ee; }
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; }

These CSS rules work as follows:

body: This sets a nice font and font size for the page.
ul#tabs: Styles the tabs list, turning off bullet points.
ul#tabs li: The display: inline; property makes the tabs appear across the page.
ul#tabs li a: Styles the links within the list. Each link is given a border around every side except the bottom, so that the active tab blends nicely with its content div below.
ul#tabs li a:hover: Highlights a tab when hovered over with the mouse.
ul#tabs li a.selected: Styles a selected tab by giving it a lighter background and bold text, and making it bigger. Notice that the bottom padding is increased to 0.38em to make sure that the tab blends with the content div.
div.tabContent: Sets a style for the tab content areas so that they match the tab design.
div.tabContent.hide: Used to hide unselected tabs.

Creating the JavaScript code

Finally, of course, you need JavaScript to make the tabs work. Here’s what the JavaScript needs to do:

Attach a showTab() onclick event handler to each of the tab links.
Hide all content divs except the first, so that only the leftmost tab’s content is visible when the page loads.
When a tab is clicked, showTab() displays the current tab content, and hides all other tab content divs. It also highlights the clicked tab and dims the other tabs.

The JavaScript kicks off by creating two arrays to hold the tab link elements and the content divs:


    var tabLinks = new Array();
    var contentDivs = new Array();

Four functions control the tabs:

init() sets up the tabs.
showTab() displays a clicked tab’s content and highlights the tab.
getFirstChildWithTagName() is a helper function that retrieves the first child of a given element that has a given tag name.
getHash() is another short helper function that takes a URL and returns the part of the URL that appears after the hash (#) symbol.

Here’s how these functions work.

The `init()` function

The first, and most complex, function is init(). It’s called when the page loads, thanks to the body element’s onload event:


  <body onload="init()">

Here’s the function itself:


    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

This function does 3 things:

It loops through all the li elements in the tabs unordered list. For each li element, it calls the getFirstChildWithTagName() helper function to retrieve the a link element inside. Then it calls the getHash() helper function to extract the part of the link’s URL after the hash; this is the ID of the corresponding content div. The link element is then stored by ID in the tabLinks array, and the content div is stored by ID in the contentDivs array.
It assigns an onclick event handler function called showTab() to each tab link, and highlights the first tab by setting its CSS class to 'selected'.
It hides all content divs except the first by setting each div‘s CSS class to 'tabContent hide'.

So that init() runs when the page loads, make sure you register it as the body element’s onload event handler:


  <body onload="init()">

The `showTab()` function

showTab() is called whenever a tab link is clicked. It highlights the selected tab and shows the associated content div. It also dims all other tabs and hides all other content divs:


    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

The function extracts the selected ID from the clicked link’s href attribute and stores it in selectedId. It then loops through all the IDs. For the selected ID it highlights the corresponding tab and shows the content div; for all other IDs it dims the tab and hides the content div. It does all this by setting CSS classes on the tab links and content divs.

Finally the function returns false to prevent the browser from following the clicked link and adding the link to the browser history.

The `getFirstChildWithTagName()` function

This helper function returns the first child of a specified element that matches a specified tag name. init() calls this function to retrieve the a (link) element inside each list item in the tabs list.


    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

The function loops through the child nodes of element until it finds a node that matches tagName. It then returns the node.

Learn about the childNodes and nodeName properties in the article Looking inside DOM page elements.

The `getHash()` function

The getHash() helper function returns the portion of a URL after any hash symbol. Used by init() and showTab() to extract the content div ID referenced in a tab link.


    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

Putting it together

That’s all there is to creating JavaScript-enabled tabs! Take another look at the demo again, and view the page source to see how the HTML, CSS and JavaScript code appear in the page:

The CSS and JavaScript go inside the page’s head element. (You can move these into separate .css and .js files and link to them, if you prefer.)
The page’s body element contains the onload event handler to trigger the init() function.
The tabs ul element contains the tab links.
Each tab’s content is stored in a div with a class of tabContent and a unique id (referenced in the corresponding tab link).

Feel free to use this code in your own Web pages. Happy tabbing!

Comments

shochberg says

3 September 2009 at 9:48 pm

Thanks for the terrific script. Very helpful!

For some reason, I can’t make the border disappear under the active tab. Seems like the border from the content part of the tab is there no matter what I do to the tab itself. Here’s my css – any obvious stupid things I’m doing (or at least obvious to someone other than me??)

body {}

ul#tabs { list-style-type: none; margin: 0 0 0 0; }

ul#tabs li { display: inline; }

ul#tabs li a {border: 1px solid #000077;border-bottom: none;text-decoration:none; font-size:13px;font-family:Verdana,Arial,MS Sans Serif,sans-serif;font-weight:bold;color:#004999;background-color:#f1f0ee;padding: 0 5 5 5}

ul#tabs li a:hover {background-color: #F6F6CE;}

ul#tabs li a.selected { border-bottom: none;background-color: #F6F6CE;padding: 0 5 5 5}

div.tabContent {font-size:10px;font-family:Verdana,Arial,MS Sans Serif,sans-serif;font-weight:bold; color:#007777; background-color: #F6F6CE; height:60; border: 1px solid #000077; margin: 0 15 0 0; padding: 2 2 2 10;}

div.tabContent a {text-decoration:none;color:#000077;}

div.tabContent a:hover {text-decoration:none;color:#007777;}

div.tabContent.hide { display: none; }

matt says

4 September 2009 at 12:29 am

Hi shochberg, and welcome!

It’s all down to using very precise padding and positioning on the tabs so that the active tab obscures the border of the content div, so it’s easy to mess up the CSS. The best bet is to go back to the original CSS, then modify the colours etc as required to meet your needs.

Try this CSS – I think it’ll give you the look you need:

      body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
      ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
      ul#tabs li { display: inline; }
      ul#tabs li a { color: #004999; background-color: #f1f0ee; border: 1px solid #000077; border-bottom: none; padding: 0.3em; text-decoration: none; }
      ul#tabs li a:hover { background-color: #f6f6ce; }      ul#tabs li a.selected { background-color: #f6f6ce; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
      div.tabContent { border: 1px solid #000077; padding: 0.5em; color: #007777; background-color: #f6f6ce; }
      div.tabContent a, div.tabContent a:hover { text-decoration:none; color:#000077; }
      div.tabContent.hide { display: none; }

Hope that helps!
Matt

shochberg says

4 September 2009 at 2:08 am

Thanks. I’ll try it. This is really a fun script to learn some of this stuff with.

S

Reply
shochberg says

4 September 2009 at 2:15 am

BTW, I stumbled onto the hint under Slow Tab Load while looking for a way to have 2 onload commands on the same page. This hint makes a HUGE difference in the look of the page when it loads that you might consider adding it into the original article. It always really looks sloppy when a page comes up and then everything jumps around for a while, and that hint not only allowed me to keep my existing onload script in place, it makes the menu look as planned immediately.

Again, thanks.

S

Reply
matt says

4 September 2009 at 3:00 am

Yes, I keep meaning to add that hint (http://www.elated.com/forums/topic/3316/) to the article – it’s on my to-do list. 🙂

Anyway, glad you like the script. If you have any other questions on it feel free to ask.

Cheers,
Matt

Reply
mashdot says

8 September 2009 at 5:35 pm

Matt

Many thanks for the script.
I have one question though, is there a way to call the tab from a URL?

ie. domain.com/page.html#about

Would open the “about” tab?

I thought the anchor links would automatically open the tab when called but they don’t.

Reply
chrishirst says

8 September 2009 at 7:37 pm

Use

document.location.hash to get the document fragment name from the URL, then use that to open the tab.

Reply
mashdot says

9 September 2009 at 11:39 am
Sorry to ask but I am one of those people who have avoided getting stuck into JavaScript, which I need to sort out.

I see
```
 function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }
```
would this have to be modified?

My JS knowledge is zero and it has only been recently that I have found the need for it on a particular project, mainly IE css hacks. I have stuck with only CSS till now.

If someone can help me out with this function I’ll buy them a beer.

For interest sake here is a screenshot of my tabs. Can send the CSS and tab images if anyone wants them. But the site will be up soon with commented code.

http://toshine.net/tabscreenshot.png
Reply
chrishirst says

9 September 2009 at 8:32 pm

“Sorry to ask but I am one of those people who have avoided getting stuck into JavaScript”

Then why make it difficult??

document.location.hash WILL return #about from the example URI, with no need for any “indexOf” methods, or any other string slicing/manipulation.

Reply
matt says

10 September 2009 at 2:30 am
Bit of a misunderstanding here. That function is in the original script, and is used to extract the hash value from a link that has been clicked in the page (document.location.hash can’t be used in that context, since it only extracts the hash from the main document URL).

@mashdot – try adding this at the end of init():
```
      // If a hash was supplied in the page URL,
      // display the corresponding tab (if found)
      if ( document.location.hash ) showTab( document.location.hash.substring(1) );
```
Then modify the first 2 lines of showTab() as follows:
```
    function showTab( selectedId ) {
      if ( typeof selectedId != 'string' ) var selectedId = getHash( this.getAttribute('href') );
```
That should work I think…

[Edited by matt on 16-Sep-09 10:40]
Reply
mashdot says

10 September 2009 at 3:13 pm

Matt, thanks for your time.

Unfortunately it does not appear to have worked, unless I have made the amendments to script incorrectly.

http://toshine.net/tabscode.html

Reply
matt says

11 September 2009 at 12:56 am

@mashdot: The code works for me. What’s the URL of your tabs page?

Reply
mashdot says

14 September 2009 at 11:42 am

Matt,

http://toshine.net/tabs/index.html

Using original CSS and new amended script. Not quite sure where I have gone wrong with the amendments?

e.g. http://toshine.net/tabs/#dolor does not work.

Reply
matt says

14 September 2009 at 12:26 pm

http://toshine.net/tabs/#dolor works on my browser (Firefox 3.5.3 Mac).

Works on Safari too.

Note that you have to visit the URL via a link, or copy/paste the URL into a new tab. If you just add the #dolor onto the existing page URL and press Return then the browser doesn’t bother to reload the page. (If you then manually reload the page then it should work too.) You need to do the page (re)load in order to trigger the JS.

Reply
mashdot says

14 September 2009 at 12:33 pm

Yup, you are right. Sorry I should have checked that.

Also works in Conkeror (http://www.conkeror.org) which many JavaScript affectionados may be interested in. I am an Emacs fan and use it for the keybindings.

Many thanks for your help with this, I will be adding Elated.com to my “kudos” links.

Reply
matt says

15 September 2009 at 9:04 am

Happy to help – and thanks for the offer of a link. 🙂

Conkeror looks interesting, I’m checking it out now!

Cheers,
Matt

Reply
shellebelle says

12 October 2009 at 9:30 pm

This is a great tab solution!

However, I’m working on a web page that requires multiple sets of tabbed navigation on it and am having some difficulty. Essentially, I have a product page and I’d like to organize each product’s About, Data, and More Info into tabs. Only the first product’s tabs are working, all the others degrade.

I suspect that changing the CSS IDs to classes is part of the solution, but I’m woefully helpless at knowing where I would need to modify the JS to call on classes. Can someone point me at what to look for in the code?

Thanks 🙂

Reply
shochberg says

12 October 2009 at 9:53 pm

Take a look at my site at savepostage.com and see if that looks like what you are trying to accomplish. Maybe my code will help, which I’d be glad to send you. But what specific problems are you having?

S

Reply
chrishirst says

13 October 2009 at 6:26 pm

And take a look at my code on http://www.modtalk.co.uk/article/c-and-s-design/dhtml-tabs/

(To copy the code use the “Click to switch code view” link)

demo is at -> http://www.modtalk.co.uk/_site/code/javascript/show-hide/

Reply
jdagraf says

20 October 2009 at 11:43 pm

Hi.

I used the script and works perfectly on firefox but when I open the page on IE 7 it doesn’t show the content of any tab unless I click on the tab menu. How can I fix it???

Reply
matt says

21 October 2009 at 12:46 am

Hi Kahl,

Welcome to Elated!

Hmm, that’s strange. The example at http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html works OK for me in IE7.

Can you please post the URL of your tabs page, and I’ll take a look?

Cheers,
Matt

Reply
jdagraf says

21 October 2009 at 1:28 am

http://localhost/si22/?mod=product&ident=6&name=CAMARA&categoria=38&pid=13

Thank you for the help

Reply
matt says

21 October 2009 at 2:48 am

Hi Kahl,

That address is on your PC (which of course I can’t view!). You’ll need to upload the page to the web somewhere so I can see it.

Or, you can “view source” in your browser, then copy & paste the code into your reply to this topic.

Cheers,
Matt

Reply
jdagraf says

21 October 2009 at 5:26 am

Ups I had both open and copy-pasted the wrong one

http://www.si22.com.ve/web/?mod=product&ident=6&name=CAMARA&categoria=38&pid=13

That’s the one

Reply
matt says

22 October 2009 at 10:33 pm

Hey Kahl,

I can’t see any tabs on that page. Did you mean to post a different page?

Cheers,
Matt

Reply
jdagraf says

22 October 2009 at 10:39 pm

No, that’s the address.

http://www.si22.com.ve/web/?mod=product&ident=6&name=CAMARA&categoria=38&pid=13

There goes again.

Reply

matt says

22 October 2009 at 11:59 pm

Hey Kahl,

Ah, I couldn’t see the correct page because the forum sofware was inserting that ‘;’ after the ‘&’ in your URL. (I keep meaning to fix that bug!)

Anyway, the reason your first tab isn’t displaying in your page is complex, and is to do with you using mootools. Basically mootools seems to be inserting various methods into the tab content div objects. All other browsers insert these at the end of the array, but IE7 for some reason inserts these at the beginning. This means that your “caracteristicas” div is no longer the first div in the list, which breaks the init() function.

The workaround is to explicitly test for your “caracteristicas” div, rather than relying on it being the first array element. Change:

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }

to:

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( id == "caracteristicas" ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( id != "caracteristicas" ) contentDivs[id].className = 'tabContent hide';
        i++;
      }

BTW I recommend resaving your ‘equipos.png’ image as a jpeg. Currently it’s 352KB. If you use jpeg you should be able to get it down to around 50KB.

Cheers,
Matt

jdagraf says

23 October 2009 at 4:17 am

Done.

Now works perfectly.

Your right about the image, I used it as the designer gave it to me without checking that.

Thanks a lot for the script, your help and pointers.

Reply
matt says

25 October 2009 at 10:37 pm

Great stuff Kahl. If you need any more help, please feel free to ask.

Cheers,
Matt

Reply
desibird says

24 November 2009 at 5:56 am

It took me 5 days to figure out the best/light/simple/perfect tabbed version.. and there you go!! I landed at the best place.

Firstly, thanks alot ELATED, for your help in tabbed JS menu system.

I was looking at the code and revolving in circles… on how to not ( have the default tab / content ) display until unless clicked on the tab.
+
Can it be possible to add (scrollTo() method) to the tabs simultaneously?? as, they have “#” anchor, it’d be a great help!!

cheers
venkat

Reply
desibird says

24 November 2009 at 11:11 am
I’ve managed to hide the default content now..!! the code to be tweaked in is:
```
  // Assign onclick events to the tab links, and
	      // highlight the first tab
	      var i = 0;

	      for ( var id in tabLinks ) {
	        tabLinks[id].onclick = showTab;
	        tabLinks[id].onfocus = function() { this.blur() };
	        if ( i == 0 ) tabLinks[id].className = '';
			contentDivs[id].className = 'tabContent hide';
	        i++;;
	      }
```
bolded part is been tweaked..!!

Now, only task left is, when clicked on tabs, a simultaneous scroll to the tabContent part!! Cuz, my links are exactly at the middle of the page!! (big header… I know!!!)

wish me luck and lend me a snippet of code if someone can!!

Cheers…
Venkat
Reply
matt says

24 November 2009 at 7:38 pm
Hi Venkat, and welcome!

With the scrollTo() thing, it’s a bit hard to see what you mean without actually seeing your page. Surely your tab content should be directly below the tabs? Can you upload your page and post the URL?

Anyway, you can use window.scrollTo() to scroll the browser window to a specific (x,y) point in the page:

https://developer.mozilla.org/En/DOM/Window.scrollTo

You can use code like this to get the top-left position of a particular element object:
```
function getCoord(obj, offsetLeft, offsetTop){
 var orig = obj;
 var left = 0;
 var top = 0;
 if(offsetLeft) left = offsetLeft;
 if(offsetTop) top = offsetTop;
 if(obj.offsetParent){
   left += obj.offsetLeft;
   top += obj.offsetTop;
   while (obj = obj.offsetParent) {
     left += (obj.offsetLeft-obj.scrollLeft+obj.clientLeft);
     top += (obj.offsetTop-obj.scrollTop+obj.clientTop);
   }
 }
 return {left:left, top:top, width: orig.offsetWidth, height: orig.offsetHeight};
}
```
(See http://www.elated.com/forums/topic/4748/ for usage)

Failing that, you could use the jQuery ScrollTo plugin to scroll to a specific element: http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Hope that helps! Let us know if you need any more info.

Cheers,
Matt
Reply
desibird says

25 November 2009 at 5:48 am

Heyy Matt, thanks for getting back! Am sorry for a vague doubt without an interpretation/example!
Links below!!

http://www.ead09.org.uk/tabs.htm

In this above url/link, i’ve created a header and tabs… am looking forward to add scrollTo effect to those tabs.

when clicked on the tabs, am even trying to achieve a scroll down effect… revealing the tabContent divs + mentioning the viewers that content is in the bottom!!

a good live example: http://www.madebysofa.com

Thats what am trying to achieve… i mean, the scrolldown effect (succeeded in hiding the content though)!!

cheers
Venkat

Reply

matt says

25 November 2009 at 5:15 pm

Hi Venkat,

I understand what you want to do now!

Here’s a complete example based on your original page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!-- Source is http://www.ead09.org.uk/tabs.htm -->
  <head>
    <!-- This page is copyright Elated Communications Ltd. (www.elated.com) -->

    <title>JavaScript tabs example</title>

    <style type="text/css">
      body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
	  div#wrapper { margin:0 auto;  width:960px;}
	  div#header { }
      ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
      ul#tabs li { display: inline; }
      ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; font-size: 32px; border-bottom: none; padding: 0.3em; text-decoration: none; }
      ul#tabs li a:hover { background-color: #f1f0ee; }
      ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
      div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
      div.tabContent.hide { display: none; }
    </style>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
    <script type='text/javascript' src='js/jquery.scrollTo-1.4.2-min.js'></script>

    <script type="text/javascript">
    //<![CDATA[

    var tabLinks = new Array();
    var contentDivs = new Array();

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = ' ';contentDivs[id].className = 'tabContent hide';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

    jQuery(function( $ ){

      $('ul#tabs').click( function() {
        $.scrollTo( 'div#tabContentContainer', 600 );
      } );
    });


    //]]>
    </script>



  </head>
  <body onload="init()">
<div id="wrapper">	
	<div id="header">
		<a href="tabs.htm"><img src="head.jpg" border="none" width="960px" height="479px" alt="HEADER"/></a>
	</div>
	
    <h1>JavaScript tabs example</h1>

    <ul id="tabs">
      <li><a href="#about">About JavaScript tabs</a></li>
      <li><a href="#advantages">Advantages of tabs</a></li>
      <li><a href="#usage">Using tabs</a></li>
    </ul>

    <div id="tabContentContainer">

      <div class="tabContent" id="about">
        <h2>About JavaScript tabs</h2>
        <div>
          <p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
          <p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
        </div>

      </div>

      <div class="tabContent" id="advantages">
        <h2>Advantages of tabs</h2>
        <div>
          <p>JavaScript tabs are great if your Web page contains a large amount of content.</p>
          <p>They're also good for things like multi-step Web forms.</p>
        </div>

      </div>

      <div class="tabContent" id="usage">
        <h2>Using tabs</h2>
        <div>
          <p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
        </div>
      </div>

    </div>

</div>
    

  </body>
</html>

It uses jQuery and the ScrollTo plugin to scroll to the tab content container whenever a tab is clicked on.

You can download jquery.scrollTo-1.4.2-min.js from:

http://code.google.com/p/flesler-plugins/downloads/list

As you can see, it’s only a few extra lines of JS and a small change to the markup. 🙂

Does that help?

Cheers,
Matt

desibird says

26 November 2009 at 5:43 am

Matt…!! Thanks alot!! that worked like a charm!

your help made me stuck up with elated.com!!!

keep watching for back-links from sites designed by me.. + will contribute my knowledge to people in this forums!!

Am good at web hosting, networking, web development (php, cms’s- joomla, wordpress) and alot of css!!

Thanks for your help again and lets keep in touch!!

🙂

Venkat

Reply
matt says

26 November 2009 at 6:33 pm

Hi Venkat,

Great stuff – I’m glad it solved your problem. jQuery makes things like that really easy to do.

We’d really appreciate back-links, as well as help on the forums – thanks! 🙂 I know next to nothing about CMSs like Joomla. Your contributions would be really useful.

Cheers!
Matt

Reply
desibird says

30 November 2009 at 8:01 am

matt.. I’d be very happy to grab the chance in solving some doubts to the extent of my knowledge.. Will start contributions within forms too!!

Nice time..

venkat

Reply
desibird says

9 December 2009 at 11:12 am

hi matt, hope things are well. is it possible to add ajax function to one of the tabs?? I mean, for “usage” tab, i’d like to give some ajax property, so that i can pull blog contents into this div!! my blog at the moment is residing in the subfolder (blog/)..

If its possible.. please help!

Cheers

PS:, the code for my index.html file can be found in the above(latest) comment by matt..

[Edited by desibird on 09-Dec-09 11:32]

Reply
matt says

9 December 2009 at 8:09 pm
Hi desibird,

It sounds like an iframe might do the trick:
```
<div class="tabContent" id="blog">
  <iframe src="blog/"> </iframe>
</div>
```
Does that work?

Matt
Reply
desibird says

10 December 2009 at 3:56 am

<iframe> tags are not a good help matt!!
i’ve also posted a new topic: http://www.elated.com/forums/topic/4832/ which pulls newest wordpress post and places in the necessary div!!

but am looking to drag whole blog into two divs..

where, content div with the content and the side-bar div with paginated archives!!

managed to pull them onto the div’s too. but, when clicked, they jump into wordpress site rather staying in the same page!!

Reply
matt says

10 December 2009 at 8:49 pm

@desibird: iframes are an easy way to display another page within a page. However I didn’t know you were using WordPress and ran your site using PHP! It’s certainly more elegant to include the content server-side, as you have done.

Sounds like you may need to use str_replace() or preg_replace() on your link URLs to repoint them to the correct URLs.

Cheers,
Matt

Reply
desibird says

15 December 2009 at 6:19 am

matt,
I managed to pull the stuff from wordpress and place it in an external html file + the possibility of reading posts in the same page has also been done.

I’ll create a new post within the elated forums and write a neat description centered post.

I’ll leave all the files related to achieve this website: http://www.c4di.org.uk.

Its an single page website (with two websites embedded in a single page).

All i’ve achieved is through this topic: javascript tabs.

Coming to wordpress: i’ve managed to change the permalinks(urls) to the present site.

Problem: when clicked on any of the archive posts topics, the site is hiding all divs again and to view the related post content, we need to click again on tubelog. is there a way to stop this behaviour??

Test link is follows: http://www.c4di.org.uk/test.php

Reply
matt says

15 December 2009 at 4:21 pm

@desibird: Love that shark image on the homepage 🙂

http://www.c4di.org.uk/test.php gives a 404 error for me…

Matt

Reply
desibird says

16 December 2009 at 5:14 am

@matt: I think, you’re still watching old website.

It might take a day or two!

Reply
desibird says

16 December 2009 at 10:14 am

@matt: Please do watch http://www.c4di.org.uk

and within the blog(tubelog), when clicked on archives, its going to home page. until unless we click on tube-log, the archived post is not viewed!

help appreciated.

Its just: c4di.org.uk

Cheers

Reply
matt says

17 December 2009 at 7:31 pm

@desibird: That is expected behaviour. Your’re clicking a link to a new page, so that new page is opening in your browser.

If you want to keep the linked content in the same page then you’ll need to use an iframe, or pull the linked content into the tab content div using Ajax.

I think you’ve also broken your WordPress index.php file since it seems to be loading your site homepage, rather than the blog post. I’d recommend moving your WordPress blog to a subfolder (e.g. http://www.c4di.org.uk/blog/index.php) or a subdomain (e.g. http://blog.c4di.org.uk/index.php).

Cheers,
Matt

Reply
desibird says

18 December 2009 at 4:21 am

Thats the main reason why, i’ve requested for an ajax property to one of the tabs!

I’m searching for adding ajax property to tubelog (so that, there would not be a problem to re-load the homepage!!)

iframe is not a great help in this matter!

Reply
desibird says

18 December 2009 at 4:27 am

@matt: if thats a good idea, should I be lokking at jquery tabbed version? or add an ajax property to fetch external html

Reply
matt says

18 December 2009 at 10:14 pm

@desibird: Pulling the latest blog posts into a tab on the homepage is one thing, but it sounds like you want your whole blog to be inside that tubelog tab, is that right? I wouldn’t recommend doing this.

The tabs script is designed to be used within a single page to display various sections of content without having a long page. It’s not designed to display whole sites or blogs that would ordinarily be on separate pages.

Apart from the effort involved in converting a whole WordPress front-end to work with Ajax, you’ll come up with issues such as accessibility, problems with search engine crawlers, content that can’t be bookmarked, a site that’s inaccessible to non-JavaScript browsers, and breaking the browser Back button, amongst others. The same kind of issues that Flash-only sites have.

Not wishing to put you off because your site looks really nice with the tabs, but I’m just making sure you’re aware of what you’d be getting into. 🙂

Cheers,
Matt

Reply
mashdot says

4 February 2010 at 6:18 am
Morning,

I discovered yesterday that I have a problem with the inclusion of this script on pages which do not have tabs. As you can imagine it is easier to include the script in the header rather then per page, and I do not really want to change this.

The issue is caused by a ‘null’ value on pages which do not have the HTML element.
```
var tabListItems = document.getElementById('tabs').childNodes;
```
Is there a way to exit the script if “tabListItems” returns ‘null’ ?

Many thanks
Reply

matt says

7 February 2010 at 4:04 pm

Welcome back mashdot!

This might work:

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      if ( !tabListItems ) return;
      ...

Haven’t tested it though.

Cheers,
Matt

Duncan101 says

8 February 2010 at 5:48 am

Great article, I’m using it now for a number of projects.

One thing was I was wondering was, can you randomise the tab that is visible?

For instance, have tab 3 visible when the user visits the page, then maybe tab 2 being visible when another user visits the page?

Many thanks

Reply

matt says

9 February 2010 at 7:47 pm

@Duncan101: Welcome to Elated. 🙂

This modification to the init() function will display a random tab each time the page loads (change the “3” to your actual number of tabs):

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      var randomTab = Math.floor( Math.random() * 3 );

      // Assign onclick events to the tab links, and
      // highlight the random tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == randomTab ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the random div
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != randomTab ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

Hope that helps!
Matt

mashdot says

10 February 2010 at 8:25 am
Matt,

Yours didn’t work out, but after playing around…
```
// Grab the tab links and content divs from the page
if(!document.getElementById('tabs')) return; 
var tabListItems = document.getElementById('tabs').childNodes;
...
```
This now works, which allows me to include the script on pages which may not have the element, and does not through any errors.

Also this was brilliant help!… “Console2” https://addons.mozilla.org/en-US/firefox/addon/1815

Thanks again.
Reply
matt says

13 February 2010 at 2:34 am

@mashdot: Glad you got it working!

Yeah, Console2 is nice for JS debugging, as is Firebug: http://getfirebug.com/

Cheers,
Matt

Reply
Duncan101 says

25 February 2010 at 7:19 am

Excellent, that was ideal!

Many thanks!

Reply
matt says

28 February 2010 at 7:29 pm

@Duncan101: You’re welcome. 🙂

Matt

Reply
horses says

9 March 2010 at 11:53 am

using your instructions for tabbed web pages – my skills are pretty limited to copy & pasting code into the appropriate places and adding content…have done all I know how to get this working…all that seems to be left is that the content is not staying “hidden” with the underlying tabs. Any help you can give me GREATLY appreciated.

http://www.invasiveplants.ab.ca/AIPISurveyResults.htm

Reply
matt says

10 March 2010 at 2:26 am
Hi horses, welcome to Elated. 🙂

A large part of the problem is your invalid markup. JavaScript works much better with correct markup:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.invasiveplants.ab.ca%2FAIPISurveyResults.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

Specifically, this stray, unclosed font tag inside your “tabs” ul is probably causing problems:
```
<font color="#42454A">
```
I would also remove the spans around your tab links, as I suspect this is confusing the JavaScript (which expects to see a link as the first thing inside the li tag).

Hope that helps! Let us know if that fixes the problem for you.

Cheers,
Matt
Reply
horses says

18 March 2010 at 9:43 pm

thanks for your help – didn’t think of the validator – but it’s still not hiding unselected tab content. I tried removing the spans (assuming I removed them from the location you meant) but nothing worked then.

Reply
matt says

19 March 2010 at 2:01 am
Hi again horses!

As I say, there are lots of errors in your markup, any one of which could be preventing the JavaScript from working. I’m guessing that you’ve edited the page using some sort of Microsoft editor (Word? FrontPage?), which has introduced a large number of errors and unnecessary markup (such as the deprecated ‘font’ tags) in the page.

In fact the markup is so broken that I don’t think the browser can even recognize the <body> element, which means it can’t run the onload event. You could hack around this by adding the following line just before the closing </body> tag at the end of the page:
```
<script>init();</script>
```
Additionally you should tidy up your ‘tabs’ list, which contains extraneous elements and invalid markup:
```
<ul id="tabs" style="list-style-type: none; margin-left: 0; margin-right: 0; margin-top: 30px; margin-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0.3em">
<li style="display: inline">
<b>
<a href="#Academic" style="text-decoration: none">
<style="color: #42454A; background-color: #DEDBDE">Academic and Research</a></li>
<li style="display: inline">
<a href="#Government" style="text-decoration: none">
<style="color: #42454A; background-color: #DEDBDE; font-weight:700">Government</a></li>
<li style="display: inline">
<a href="#Individual" style="text-decoration: none">
<style="color: #42454A; background-color: #DEDBDE; font-weight:700">Individual</a></li>
<li style="display: inline">
<a href="#Other" style="text-decoration: none">
<style="color: #42454A; background-color: #DEDBDE; font-weight:700">Other</a></li>

</ul>
```
For example:
```
<ul id="tabs">
<li><a href="#Academic">Academic and Research</a></li>
<li><a href="#Government">Government</a></li>
<li><a href="#Individual">Individual</a></li>
<li><a href="#Other">Other</a></li>
</ul>
```
If you do these things then there’s a reasonable chance that the JavaScript will run and pick up the tab links. However you’ll really need to go through the page and fix all those errors in the markup, otherwise you’re likely to encounter more problems further down the line. 🙂

[Edited by matt on 19-Mar-10 02:02]
Reply
djake1234 says

22 March 2010 at 10:17 am

Hi

Firstly…loving the script, so easy so lightweight! Thanks.

Could I request for some help though….

1)How could I link to a tab from within another ‘tabContent’, just within a parargraph link.

2)Is it possible to style the first tab differently to the others…i.e. every other tab to be ‘selected’ is fine but could the first tab when ever highlighted have a class of ‘1st-selected’ so i can apply a different background….tried to do it myself, when page loaded it was fine, when click to another tab and back to the 1st just gave class of ‘selected’

Thanks muchly

djake1234

Reply

matt says

23 March 2010 at 5:49 pm

Hi djake1234,

Thanks for the compliment. 🙂

1) You’ll need to modify the showTab() function to accept an optional link object, as follows:

    function showTab(obj) {
      var selectedId = (obj && typeof obj.href != "undefined") ? getHash(obj.href) : getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

Then you can create a link to a tab within regular content like this:

<a href="#advantages" onclick="return showTab(this)">link text</a>

2) Use the CSS :first-child pseudo-class to select the first element in a row of elements:

http://www.w3schools.com/css/pr_pseudo_first-child.asp

Hope that helps!
Matt

djake1234 says

29 March 2010 at 10:13 am

Hello again…..

Thanks for the help…..much appreciated.

is it possible to have a choosen tab open on page load…..I can’t use querystring (CMS), so I suppose it have to be e.g. “#1”

Also, how about fading tab transition? :- )

thanks again, this really is the best script out there!

Reply
matt says

30 March 2010 at 3:59 am

Hi djake1234,

Thanks for the compliment. 🙂

I covered opening a particular tab on page load earlier in the topic:

http://www.elated.com/forums/topic/4717/#post18005

Transitions are best done using a library such as jQuery – see http://api.jquery.com/category/effects/

Cheers,
Matt

Reply
baerej says

14 April 2010 at 10:52 am

Hi. I am having some difficulty when my page loads. I have the javascript and style sheets in a linked file, but maybe you can tell what’s going on by seeing the page in action. For some reason when the page loads, all of the div content panels show up and then hide. How do I make this stop?

Thanks,
Elise
http://164.109.50.192/index_tabstest.html

Reply
matt says

20 April 2010 at 6:17 am

Hi Elise,

Try this solution here: http://www.elated.com/forums/topic/3316/

Does that help?

Reply
elfpixel says

21 April 2010 at 2:33 pm

Hello!

I just managed to modify your great tab script to fit my project. This really is a wonderfully easy to understand tutorial. You saved me a lot of time and I still learned so much. 😀

Well, I still got some difficulty with implementing some important features.
my example: http://lukas_eibensteiner.public1.linz.at/tabs_example.html

1. I want to create the basic template for a user interface panel on my website using tabs. As I will be putting more than one set of tabs on each page there will be errors because of the variables. Is there any workaround for this problem?

2. Maybe it would be possible to mark some tabs as “disabled” (like tab 4 in my example) until a button is clicked or something like this.

Thanks again for this awesome tutorial!
elfpixel

[Edited by elfpixel on 21-Apr-10 14:49]

Reply
matt says

24 April 2010 at 11:05 pm
Hey elfpixel:

1. Looks like you’ve already solved this by passing a div ID to the init() function, yes?

2. Maybe use something like:
```
onclick="document.getElementById('tabId').className = '';"
```
?

Nice looking tabs btw 🙂
Reply
elfpixel says

30 April 2010 at 5:20 pm

Hi matt!
Thanks for your help, but I’m afraid that’s still not all.

1. If I put 2 sets of my modified tabs onto one page none of them is working correctly. Maybe it’s because of the arrays. I tried to solve it but I’m probably not yet skilled enough.

2. Of course this will change the appearence of the tab link, but it would still be clickable. So unless there is a CSS rule for disableing links, it won’t work that way.

Thanks for the compliment! 😀

Reply

matt says

1 May 2010 at 6:53 pm

@elfpixel:

1. It’s quite a big job – you need to rewrite most of the JavaScript to store multiple sets of tabs in multiple arrays. Doable, but fiddly. Here’s a working example based on my original script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <!-- This page is copyright Elated Communications Ltd. (www.elated.com) -->

    <title>JavaScript tabs example</title>

    <style type="text/css">
      body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
      ul.tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
      ul.tabs li { display: inline; }
      ul.tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
      ul.tabs li a:hover { background-color: #f1f0ee; }
      ul.tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
      div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
      div.tabContent.hide { display: none; }
    </style>

    <script type="text/javascript">
    //<![CDATA[

    var tabLinks = new Array();
    var contentDivs = new Array();

    function init(tabsID) {
      tabLinks[tabsID] = new Array();
      contentDivs[tabsID] = new Array();

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById(tabsID).childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[tabsID][id] = tabLink;
          contentDivs[tabsID][id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks[tabsID] ) {
        tabLinks[tabsID][id].onclick = showTab;
        tabLinks[tabsID][id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[tabsID][id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs[tabsID] ) {
        if ( i != 0 ) contentDivs[tabsID][id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab(obj) {
      var selectedId = (obj && typeof obj.href != "undefined") ? getHash(obj.href) : getHash( this.getAttribute('href') );          
      var selectedId = getHash( this.getAttribute('href') );
      
      // Find the set of tabs that this tab is in
      outer:
      for ( var tabsID in tabLinks ) {
        for ( var id in tabLinks[tabsID] ) {
          if ( id == selectedId ) break outer;
        }
      }

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs[tabsID] ) {
        if ( id == selectedId ) {
          tabLinks[tabsID][id].className = 'selected';
          contentDivs[tabsID][id].className = 'tabContent';
        } else {
          if ( typeof tabLinks[tabsID][id] != "undefined" ) {
            tabLinks[tabsID][id].className = '';
            contentDivs[tabsID][id].className = 'tabContent hide';
          }
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i]];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

    //]]>
    </script>
  </head>
  <body>
    <h1>JavaScript tabs example</h1>

    <ul class="tabs" id="tabs1">
      <li><a href="#about1">About JavaScript tabs</a></li>
      <li><a href="#advantages1">Advantages of tabs</a></li>
      <li><a href="#usage1">Using tabs</a></li>
    </ul>

    <div class="tabContent" id="about1">
      <h2>About JavaScript tabs</h2>
      <div>
        <p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
        <p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
      </div>
    </div>

    <div class="tabContent" id="advantages1">
      <h2>Advantages of tabs</h2>
      <div>
        <p>JavaScript tabs are great if your Web page contains a large amount of content.</p>
        <p>They're also good for things like multi-step Web forms.</p>
      </div>
    </div>

    <div class="tabContent" id="usage1">
      <h2>Using tabs</h2>
      <div>
        <p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
      </div>
    </div>


    <ul class="tabs" id="tabs2">
      <li><a href="#about2">About JavaScript tabs</a></li>
      <li><a href="#advantages2">Advantages of tabs</a></li>
      <li><a href="#usage2">Using tabs</a></li>
    </ul>

    <div class="tabContent" id="about2">
      <h2>About JavaScript tabs</h2>
      <div>
        <p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
        <p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
      </div>
    </div>

    <div class="tabContent" id="advantages2">
      <h2>Advantages of tabs</h2>
      <div>
        <p>JavaScript tabs are great if your Web page contains a large amount of content.</p>
        <p>They're also good for things like multi-step Web forms.</p>
      </div>
    </div>

    <div class="tabContent" id="usage2">
      <h2>Using tabs</h2>
      <div>
        <p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
      </div>
    </div>


<script type="text/javascript">
init('tabs1');
init('tabs2');
</script>


  </body>
</html>

2. You could use the JavaScript DOM functions to remove the ‘a’ element from around the text when it’s disabled (and add the link back in afterwards): http://www.elated.com/articles/changing-page-elements-with-the-dom/

Hope that helps!

elfpixel says

2 May 2010 at 4:55 am
Wow, thank you so much for the great support, your patience and all the time and effort you put into this! 🙂

1. It’s working perfectly! In my opinion this is even more useful than the original code. You should definitley consider adding this to the tutorial’s page.

There’s just one more problem. Linking to a tab within another tab’s content does not seem to work anymore.
```
<a href="#content3" onclick="return showTab(this)">link to tab 3</a>
```
It must have got to do with the new showTab() function. I tried fixing it myself but failed again.

2. Thanks for the link, writing the script myself won’t be too hard for me now.
Reply
octane says

5 May 2010 at 6:54 am

This is a great script Matt, it’s really light and works great, by far the best I’ve come across. I like the modification to make the first tab random too.

I have run into a problem though when using it in IE6 & IE7 in conjunction with my lightbox javascript. It just prevents the automatic loading of the first tab and it hides them all.

You can see this at http://2010s.pipeten.co.uk/temp.html

It works perfectly in all browsers apart from IE6 & IE7 however If I take out the link to my /prototype.js file it works in IE6 & IE7 perfectly.

I have tried some of your different workarounds above but none seemed to fix this issue. Do you have any idea what might be causing the conflict between the two .js files? I’d really appreciate it if you could take a quick look for me.

Reply
matt says

7 May 2010 at 1:58 am
@elfpixel: There’s an error in that code I posted. Remove this line and it should work:
```
      var selectedId = getHash( this.getAttribute('href') );
```
Reply
matt says

7 May 2010 at 2:46 am
@octane: Absolutely no idea I’m afraid. I don’t know Prototype that well. IE6 isn’t throwing errors so I’m guessing that somehow the tabs JS is failing to show the relevant tab. (It’s obviously successfully hiding the other one.)

Things to perhaps try:

1) Change the order of your JS includes? This might stop Prototype breaking the tabs JS:
```
<script type="text/javascript" src="/prototype.js"></script>
<script type="text/javascript" src="/lightbox.js"></script>
<script type="text/javascript" src="/tabs.js"></script>
```
2) Rather than calling init() in the body onload, try placing this just before the closing </body> tag instead:
```
<script type="text/javascript">init();</script>
```
Does that help?
Reply
octane says

7 May 2010 at 9:54 am

Thanks for the reply Matt, I’ve tried both of those and it didn’t help unfortunately. Thanks for taking a look though, it is appreciated.

Reply
djake1234 says

9 May 2010 at 6:58 pm

Hi again

I am struggling a little to get this working the way I would like it to. Please help…I know you already have, I really appreciate it!

I would like to get this script working with the functionality to load a tab from a link within another tab and to be able to load a specific tab on page load (#tab3). I have scoured the list of questions and made all the changes, but can’t get tab onload to work with link from other tab, one breaks the other.

Also, is there any reason why this would break the script another javascript function I want to use (http://css-tricks.com/moving-boxes/). Makes the boxes stack, not float left and appear inline.

Thanks again

Reply
djake1234 says

10 May 2010 at 9:34 pm

Oh, and just to add to the previous post….I am using a CMS, so i can’t use the querystring (i.e. /?tab=tab1) but I can use #tab1 in the URL

thanks

Reply
matt says

18 May 2010 at 4:32 am

@djake1234:
“I would like to get this script working with the functionality to load a tab from a link within another tab and to be able to load a specific tab on page load (#tab3).”

The code I gave you earlier should do this:

http://www.elated.com/forums/topic/4717/#post18939
http://www.elated.com/forums/topic/4717/#post18005

Reply
djake1234 says

22 May 2010 at 9:24 pm

@Matt

Sorry to keep going on about this…

I can’t seem to get it working. I can get the ‘open a tab from a same page’ function working, but not load a dprcific tab on page load working. When I try to implement your reccomended code, both don’t work……and I really need them both together if possible.

Could you combine the javascript just so I know its being done right.

Just to re-iterate, could they both to work together?

Again I’m sorry to rabbiting on about it, just getting desperate, launch is next week.

Thanks

Reply
matt says

24 May 2010 at 2:49 am

@djake1234: I think we’ll need to see your page to help further. Can you post the URL?

Reply
djake1234 says

24 May 2010 at 3:04 am

Thanks again for getting back to me.

I’m afraid i can’t show you. Its in development and therefore currently has no url.

As well as that, the new brand launch is hush hush, I couldn’t show you if I wanted…not that you would do anything

Sorry

Reply
matt says

31 May 2010 at 5:08 am

By the way, browsers are starting to get to the point where you can now do tabs with just CSS – no JavaScript required. Yay! 🙂

Here’s a good tut on this:

http://htmlrockstars.com/blog/using-css-to-create-a-tabbed-content-area-no-js-required/

Reply
Carla says

31 May 2010 at 5:47 pm

Matt,

Would you happen to have input on creating “Rounded Tabs” using your amazing example?

Reply
matt says

3 June 2010 at 4:21 am
Hi Carla,

The easiest way to create tabs with rounded corners is to use the CSS3 border-radius property. I covered this in our newsletter ( http://www.elated.com/newsletter/ ) a while back – here’s what I wrote:

—–

1. Creating rounded corners with border-radius

Rounded borders around page elements have long been popular amongst web designers, but traditionally they’re a pain to create. First you have to create the effect in Photoshop, then you have to slice up multiple background images for each element.

CSS3 promises to end all this hassle with the lovely border-radius property. This lets you create a border with rounded corners, and specify the radius of the corner curves. For example:
```
  .mybox { border: 5px solid red; border-radius: 10px; }
```
At the time of writing, only Opera 10.5 supports border-radius as-is. Mozilla and WebKit browsers have their own versions (-moz-border-radius and -webkit-border-radius). So to get it to work in Opera, Firefox, Safari and Chrome you need to write:
```
  .mybox { border: 5px solid red; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
```
Incidentally, you can also specify a radius for each corner individually, although sadly the syntax is completely different for each browser engine. (Can’t these people agree on anything!) Here’s how to set a rounded border just for the top right corner of an element:
```
  .mybox { border: 5px solid red; border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; }
```
…

4. Getting it all working in IE

So now we come to the elephant in the room: Internet Explorer! How can we use these lovely CSS3 effects in this dear old browser? First of all, the good news is that IE9 will _probably_ support all these properties natively. For older versions, though, we’ll need to resort to a bit of JavaScript cunning. Fortunately there’s a great script out there that does all the hard work for us:

http://fetchak.com/ie-css3/

To use it, download the script and save it in the same folder as your Web page, then add the following property to the same selector(s) that use the CSS3 properties:
```
  behavior: url(ie-css3.htc);
```
For example, here’s how to create fully cross-browser rounded corners that work in Firefox, Safari, Chrome, Opera, and IE 6, 7 and 8:
```
  .mybox { background: #fff; border: 5px solid red; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; behavior: url(ie-css3.htc); }
```
Have fun!
Reply
bgood says

15 June 2010 at 10:25 am

I have this working with one slight qwirk.

I can set a link within another page to go to a page that has tabs and have a specified tab open when the user arrives. That’s cool! If I link to the tabbed page without a specific tab in the href code the page loads perefectly and I see the top of my page.

However when I specify a tab within the link (example: /folder/tabbed_page_name.aspx#tabID ) the page loads but is positioned down the page depending on which tab I specify – so the user does not see the top of the page. They are already scrolled down a bit. Is there a simple way to address this so that the page loads properly (not scolled down) but with the specified tab open?

Thanks!

Reply
bgood says

17 June 2010 at 7:20 am
OK – In case anyone else has been haveing the same issues as me – I found a workable solution.

My pages are built using aspx masters. I placed a topofpage anchor tag at the top inside the master like this:
```
<a name="topofpage"></a>
```
I have the init placed after my last div:
```
<script type="text/javascript">
init();
</script>
```
I simply modified this last piece of code to include window.location.hash = “topofpage” like this:
```
<script type="text/javascript">
init();
window.location.hash = "topofpage"  
</script>
```
Now when the user clicks on a link that specifies a tab on the page, they arrive at the page with the proper tab opened and they are positioned at the top of the page.
Reply
matt says

20 June 2010 at 9:19 pm

@bgood: Thanks for posting your solution – glad you got it working. 🙂

Reply
abyteman says

21 June 2010 at 8:30 am

Thanks for a great tutorial. My problem is with internet explorer. When I run the script in ie, I have to click the information bar for it to run. Firefox works fine. Any help would be appreciated!

Reply
sixer says

23 June 2010 at 8:02 am

First, great tutorial. It really helped a lot and it was just what I was looking for. My problem though is that this seems to be for a whole web page and I want to insert tabbed content on to an existing web page and the Javascript won’t work that way. Any suggestions on how to modify the javascript to allow this to work with only the content of the page and not the whole page itself? Any help or additional tutorials you could suggest would be greatly appreciated.

Reply
matt says

25 June 2010 at 4:07 am

@abyteman: Can you be more specific (including any IE error messages)?

@sixer: You can use the code fine within an existing page. What problem are you having exactly?

Reply
sixer says

29 June 2010 at 2:15 pm

Here is what I did. I created a page in Notepad â€“ using the example as a guide. When I save the page as an HTML file so I can see how it is working, normally it looks ok. I sometimes get an Active X error but I think that is due to my security. Anyhow, I am trying to implement this into an existing html page (WordPress template) and it will display all the information vertically and not in a horizontal tabbed format. I was told that the JavaScript was pertaining to an entire web page and that I needed to focus on just the content. I could send you my code but honestly it is no different than the example â€“ besides the content within the tabs.

Reply
matt says

29 June 2010 at 7:20 pm

@sixer: “it will display all the information vertically and not in a horizontal tabbed format.” – Sounds like a problem with the CSS, not the JavaScript.

Reply
armstra says

16 July 2010 at 7:10 am

Hi Matt,

I have zero knowledge of js so I was hoping you might provide me the exact js code required to open a tab from an external link.

I have an email newsletter and when a particular story is selected I want the user to be taken to the browser where the tab with that story is opened and ready to read.

I require the code to use for teh link in the newsletter and any code changes required for the tabbed page itself.

Hope this makes sense.

Cheers, love your work.
Alan

Reply
armstra says

16 July 2010 at 7:14 am

Sorry Matt,

I’m aware that you have answered this question in a previous post but to be honest I didn’t understand the answer. I really do require something I can copy and paste and need to be told exactly where to place the code on the pages.

Thanks again,
Alan

Reply
bgood says

16 July 2010 at 2:57 pm

armstra – take a look at my 2 posts above from June 15 and June 17. I think they will answer your question on how to specify a tab within a link.

[Edited by bgood on 16-Jul-10 14:58]

Reply
armstra says

16 July 2010 at 7:36 pm

Thanks bgood.

I had read your post but like I said above, I have no working knowledge of javascript and so it doesn’t make a lot of sense when I read it.

Would it be possible to send me a stripped down working example (one html page with a link opening a specified tab on a different html page) so I can simply duplicate the parts that I require.

Cheers.

Reply
armstra says

18 July 2010 at 4:10 am

Hi,

Is there anyone who can help me with a working example of using an external link to open a specific tab.

I need to link from a newsletter in Outlook Express to the tabbed webpage showing the relevant story.

I’m a graphic designer not a programmer so would really appreciate a little help getting this to work ASAP.

Thanks guys,

Reply
armstra says

18 July 2010 at 10:22 pm

Hello again,

Just to add further to my posts above about seeking help with an external link.

This is an example of a tab which I would like to be opened upon arrival at the tabbed page

<li><a href=”#three”>Housing Direct</a></li>

This is the link I’ve been using to open the tab from an external link

index.htm#three

It does navigate to the correct story but then IE asks if I want to allow the content to open and when I select yes the page is refreshed and tab one is opened instead of tab three.

Can anyone help me to get this to work

Cheers

[Edited by armstra on 18-Jul-10 22:23]

Reply

philcey says

19 July 2010 at 2:07 pm

Hi, I made the modifications to the javascript to allow me to be able to link to tabs with #tabname at the end of an url.

I don’t know what I did wrong but when i go to the #tab url it selects the tab defined but doesn’t display tab content or unhighlight the default first tab.

   <script type="text/javascript">
    //<![CDATA[

    var tabLinks = new Array();
    var contentDivs = new Array();

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems.nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems, 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = ' ';contentDivs[id].className = 'tabContent hide';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes.nodeName == tagName ) return element.childNodes;
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

    jQuery(function( $ ){

      $('ul#tabs').click( function() {
        $.scrollTo( 'div#tabContentContainer', 600 );
      } );
    });

philcey says

19 July 2010 at 4:12 pm

please forget last, it was me missplacing the code u told me to add.

Reply
armstra says

21 July 2010 at 7:52 am

Giving that no one has assisted me with my question about external links opening a tab I have quit using this approach and instead joined a forum where the moderators care enough to actually respond.

Great tabs, pity about the lack of feedback.

[Edited by armstra on 21-Jul-10 07:53]

Reply
harshida says

25 July 2010 at 2:43 pm

Hi all,
I am new on this website as well new in web development. I learn css and html and quite fluent both of them but also learning java script and jquery . But I am not good in programming pls suggest me nice JavaScript book where I can find real programming I am so confuse and frustrate at the moment. I can do lower level programming but donâ€™t have Idea about real programming pls suggest me some books or site name where I can learn deep knowledge of both of them.
Thanks
harshida

Reply
matt says

27 July 2010 at 4:44 am

@harshida: Welcome to Elated!

A good solid JavaScript book that I highly recommend is “JavaScript: The Definitive Guide”:

http://www.amazon.co.uk/JavaScript-Definitive-Guide-David-Flanagan/dp/0596101996/

Some good tutorial sites:

http://www.elated.com/articles/cat/javascript/ (our own tutorials)
http://www.w3schools.com/js/default.asp
http://articles.sitepoint.com/category/javascript

Hope that helps. 🙂 If you have specific questions please feel free to post them here:

http://www.elated.com/forums/authoring-and-programming/

Reply
fong says

2 August 2010 at 8:56 pm

I tried the same code displayed in IE source page. the tabs will show up, but all the tabs contents are shown at the same time, even for those tabs are NOT selected.

problem with the CSS? I am running that in Ruby on Rails.

strange, ummm…..

Reply
matt says

2 August 2010 at 9:23 pm

@fong: What do you mean by “IE source page”?

If you’re having trouble getting it to work in Internet Explorer then turn on script debugging and see what JavaScript errors you’re getting.

Reply
fong says

3 August 2010 at 6:54 am

matt, thanks for the quick reply. I opened the demo link in IE, and then clicked on the “view source” to copy the code to my RoR framework to try it out.

most of the code is in the same file, except I put the css code in stylesheet directory, then include in the page.

any help is appreciated.

Reply
matt says

4 August 2010 at 4:09 am

@fong: Can you post the URL of the page with the problem, so we can take a look?

Reply

motoringss says

7 August 2010 at 11:15 pm

Hi, matt
I really like your code but I got a problem right now.
I separate your code to 3 files. (.css .js .htm)
And I added another 3 tabs and 3 tab contents.
I use firebug to find out the problem and I found out the last two tabs “return” & ” support” is not hiding automatically.

Please help me to take a look.
Please see the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <link href="http://www.motoringss.com/elated/tabs.css" rel="stylesheet" type="text/css" /> 
  </head>
  <body>
  
    <script src="http://www.motoringss.com/elated/activetabs.js" type="text/javascript"></script>

    <ul id="tabs">
	<li><a href="#contact">Contact Us</a></li>
    <li><a href="#shipping">Shipping &#38; Handling</a></li>
	<li><a href="#payment">Payment</a></li>
	<li><a href="#terms">Terms</a></li>
	<li><a href="#returns">Returns</a></li>
	<li><a href="#support">Support</a></li>
    </ul>

    <div class="tabContent" id="contact">
      <h2>contact</h2>
      <div></div>

    </div>

    <div class="tabContent" id="shipping">
      <h2>Shipping</h2>
      <div></div>
    </div>

    <div class="tabContent" id="payment">
      <h2>Payment</h2>
      <div></div>
    </div>
    
    <div class="tabContent" id="terms">
      <h2>Terms</h2>
      <div></div>
    </div>
    
    <div class="tabContent" id="return">
      <h2>Returns</h2>
      <div></div>
    </div>
    
    <div class="tabContent" id="support">
      <h2>Support</h2>
      <div></div>
    </div>


<script type="text/javascript">
init();
</script>

  </body>
</html>

matt says

9 August 2010 at 5:09 am
@motoringss: The problem is that your “Returns” link references an ID of ‘returns’:
```
  <li><a href="#returns">Returns</a></li>
```
…but your corresponding tabContent div has an ID of ‘return’, not ‘returns’:
```
    <div class="tabContent" id="return">
```
Reply
motoringss says

9 August 2010 at 9:24 am

Thank you so much, matt
And sorry for my careless mistake…
thanks again for you help.

Reply
motoringss says

9 August 2010 at 9:33 am

Hi Matt, I tried to use the code for ebay auction. And ebay gave me a message below:

Your listing cannot contain javascript (“.cookie”, “cookie(“, “replace(“, IFRAME, META, or includes), cookies or base href.

Do you have any idea I can still use the code?

Reply
matt says

10 August 2010 at 4:26 am
@motoringss: It’s probably because you’re trying to include an external .js file:
```
    <script src="http://www.motoringss.com/elated/activetabs.js" type="text/javascript"></script>
```
I don’t think ebay allows that.

Instead, paste the contents of activetabs.js into your listing page (inside <script> … </script> tags of course).
Reply
motoringss says

10 August 2010 at 4:52 am

Thank you so much.
I tried to paste the JS contents inside the main page and it works.
But I just want to know why the external .js file wont work?
Just curious…..

Reply
matt says

10 August 2010 at 5:19 am

@motoringss: Because ebay doesn’t allow external JS includes in listing pages (presumably for security reasons).

Reply
motoringss says

10 August 2010 at 11:42 pm

Matt,
Thank you so much, you are professional!!!!

Reply
matt says

12 August 2010 at 1:29 am

@motoringss: Happy to help! 🙂

Reply

eman says

17 August 2010 at 1:06 pm

Hello Matt,

I am trying to use the javascript tab in my website I am working on. I setup four tabs and it shows fine in Safari but in IE8 all of the tabs text is displayed and will not be centered like Safari. In IE7 I am having the same problem and it shifts too much to the right. When I first created the tabs not within my website everything looked fine, but when I inserted the code into my website these problems in IE8 and IE7 occurred. Maybe it has be arranged differently for IE but I’m not sure.

Please let me know what I can do to resolve this as I don’t know what else to do. Here is the code.

Thanks for your help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JCD</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
	background-repeat: repeat-x;
	background-color: #FFFFFF;
	background-image: url(images/img01a.jpg);
}
.style1 {color: #FFFFFF}
.style2 {color: #000000}
.style3 {
	font-family: "Arial Black";
	font-size: 17px;
	color: #000000;
}
.style4 {color: #333333}
 
 body2 { width: 834px;  margin:0 auto; font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
      ul#tabs {list-style-type: none; margin: 5px 0 0 0; padding: 5px 0 0.3em 0; }
      ul#tabs li { display: inline; }
      ul#tabs li a { color: #ffffff; background-color: #3366cd; border: 1px solid #000000; border-bottom: none; padding: 0.3em; text-decoration: none;}
      ul#tabs li a:hover { background-color: #000000; }
      ul#tabs li a.selected { color: #000; background-color: #f1f1f1; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
      div.tabContent {border: 1px solid #000000; padding: -0.5em; background-color: #f1f1f1;} 
      div.tabContent.hide {display: none;}
.style11 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; }
.style15 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
.style18 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; }
.style7 {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.style8 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style9 {font-size: 12px}
    .style20 {color: #FFFFFF}
    .style21 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; }
    
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->

var tabLinks = new Array();
    var contentDivs = new Array();

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems.nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems, 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes.nodeName == tagName ) return element.childNodes;
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body class="body" onload="MM_preloadImages('images/proposalpicb.jpg','images/signuppic2b.jpg','images/testimonialspicb.jpg')">
<!-- start header -->
<div id="wrapper">
<div id="header">
	<div id="logo">
		<h1><img src="images/Header-text4.png" alt="" width="428" height="43" vspace="9" /></h1>
	  
	    <div></div>
	</div>
	<div class="newsletter" id="rss">
	  <div align="center"><a href="#"> Sign Up for Newletter </a><br />  
	      <img src="images/newsletter.jpg" alt="" width="50" height="51" /><br />
      </div>
	</div>
</div>
<!-- end header -->
<!-- star menu -->
<div id="menu">
	<ul>
		<li class="current_page_item"><a href="#">About Us</a></li>
		<li class="current_page_item"><a href="#">Graphic Design</a></li>
        <li class="current_page_item"><a href="#">Web Design</a></li>
        <li class="current_page_item"><a href="#">Marketing Services</a></li>
        <li class="current_page_item"><a href="#">Portfolio</a></li>
        
	</ul>
</div>
<!-- end menu -->
<!-- start page -->

	
	<!-- start ads -->
	<!-- end ads -->
	<!-- start content -->
	<!-- end content -->
    <!-- start sidebar -->
    <!-- end sidebar -->
  <div id="pagepricing">
  <body onload="init()">
    
  <ul id="tabs">
    <li><a href="#BP">Business Products</a></li>
    <li><a href="#WP">Wedding Products</a></li>
    <li><a href="#website">Website and Hosting Fees</a></li>
    <li><a href="#Payment">Payment Policy</a></li>
  </ul>
  <div class="tabContent" id="BP">
      <h2><img src="images/img08.gif" alt="" width="16" height="15" />About JavaScript</h2>
      <div>
        <table width="700" border="1">
          <tr>
            <th bgcolor="#000000" class="style7" scope="col"><span class="style11 style20">Quantities</span></th>
            <th bgcolor="#000000" scope="col"><span class="style21">100</span></th>
            <th bgcolor="#000000" scope="col"><span class="style21">250</span></th>
            </tr>
         
        </table>
        <br />
      </div>
  </div>
    <div class="tabContent" id="WP">
      <h2>Advantages of tabs</h2>
      <div>
        <p>JavaScript tabs are great.</p>
              </div>
  </div>
    <div class="tabContent" id="website">
      <h2>Using tabs</h2>
      <div>
        <p>Click a tab to view the tab's content.</p>
      </div>
  </div>
    <div class="tabContent" id="Payment">
      <h2>Using tabs</h2>
      <div>
        <p>PaymentClick a tab to view the tab's content. <a href="/articles/javascript-tabs/">R</a></p>
      </div>
  </div>
    <div id="bodytextpricing"><span class="style3"><br />
    Your Satisfaction Is Our Committment! </span><br />
        <br />
        <span class="style4">Contact us today.</span></div>
    <p><a href="/articles/javascript-tabs/">return</a>
    </p>
<p align="center" class="style2"><img src="images/proposalpic.jpg" alt="" width="172" height="88" id="Image2" onmouseover="MM_swapImage('Image2','','images/proposalpicb.jpg',1)" onmouseout="MM_swapImgRestore()" /><img src="images/signuppic2.jpg" alt="" width="172" height="88" id="Image1" onmouseover="MM_swapImage('Image1','','images/signuppic2b.jpg',1)" onmouseout="MM_swapImgRestore()" /><img src="images/testimonialspic.jpg" alt="" width="172" height="88" id="Image3" onmouseover="MM_swapImage('Image3','','images/testimonialspicb.jpg',1)" onmouseout="MM_swapImgRestore()" /><br />
	</p>
</div>
<p>
  <!-- end page -->
  <!-- start footer --></p>
<div id="footer">
	<p class="legal style1">
		&copy;2008 - 2010 Jenkins Creative Designs. All Rights Reserved. </p>
<p class="bottomlinks"><a href="index.html">Online Payments</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;<a href="index.html">Site Map</a> &nbsp;&nbsp;&bull;&nbsp;&nbsp;<a href="index.html">Contact Us</a></p>
</div>

</body>
</html>
<body>
</body>

[Edited by matt on 18-Aug-10 04:11]

matt says

18 August 2010 at 4:10 am

@eman: For one thing you have 2 body elements in the page which will cause all sorts of problems. I can’t even get the tabs working in Firefox.

Best bet: If you can upload the page and post the URL then it will be easier for us to see the problem, and debug it.

Cheers,
Matt

Reply
eman says

18 August 2010 at 12:18 pm

Hello Matt,

The URLs are below. Just to reiterate the javascript tabs content displays ok only showing one at a time in Safari 4 but in IE8 you can see all of the tab content. Also in IE7 the complete tab frame shifts to the right. It also displays all of the content like IE8. Another thing I noticed about Safari and perhaps the other ones to is that when I click on a tab the footer shifts up. Is there a way I can get the footer to stay at the bottom?

Also how can I remove the horizontal scroll at the bottom which can be annoying to vistors?

I included the css code for reference.

If you can correct the code and resend that would great. I truly thank you for your help with this matter and have a great day.

http://www.jenkinscreativedesigns.com/pricingnw.html

http://www.jenkinscreativedesigns.com/csscode.html

Reply
matt says

19 August 2010 at 5:11 am

Hi eman,

Thanks for posting the page. It’s amazing it works in Safari at all (which you’re right, it does) since you have 2 body elements in there (you’re only allowed 1 in an HTML page), which will confuse any but the most robust browser!

It doesn’t work in Firefox or Opera (and presumably not IE).

I’m guessing that it’s not even getting to fire the init() function since you’ve included that in the second <body> tag. So your JavaScript won’t work at all.

Here’s a full list of the things that need cleaning up:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jenkinscreativedesigns.com%2Fpricingnw.html&charset=%28detect+automatically%29&doctype=Inline&group=0

I would start, though, by removing that duplicate body element. Then at least all browsers will be able to parse the page without choking, and hopefully start running the JavaScript.

Cheers,
Matt

Reply
eman says

19 August 2010 at 8:50 am

Thanks Matt.

Reply
picknikker says

27 August 2010 at 9:19 am

Hi and many thanks for this.

Is there a chance of making this work without having Access to the <body>-tag. I’m working on a new look for my online-shop. Unfortunatelly I can’t edit the body-tag because its an e-pages product. http://www.best-weekend.de/epages/62371225.preview/de_DE/?ObjectPath=/Shops/62371225/Products/2001

As you can see, its not working very well.

Reply
matt says

29 August 2010 at 6:15 pm
@picknikker: Just put this at the end of the page, before the </body> tag:
```
<script>init();</script>
```
Reply
picknikker says

30 August 2010 at 5:53 am

Thanks Matt, unfortanutally it’s still not working properly. Do I have to put the code right before the </body>-tag? Because I cant’t do this either. Do You have another Idea? Thanks a lot.

Reply
picknikker says

30 August 2010 at 7:15 am

Me again. I just don’t get it. Now I’ve made an extra site outside of the preset shop-design. http://www.team-rpx.de/tabs.html …
Although I just copied the <head>-part from your sample-page (which is working great in my FF3.6, by the way) it doesnt work. Please help. Thank You

Reply
matt says

31 August 2010 at 6:08 pm
@picknikker: It doesn’t work because your first tab link does not match the ID of the first tabContent div:
```
  <li><a href="#kurzpotrait">KurzportrÃ¤t</a></li>

...

<div class="tabContent" id="kurzportrait">
```
kurzpotrait != kurzportrait 🙂
Reply
picknikker says

1 September 2010 at 2:44 am

Hi Matt and thanks again. How could I not see this? Now it’s working pretty well. Greetings to Australia from Cologne!

Reply
dave_gordon says

1 September 2010 at 3:27 pm

Hi Matt,
I would be gratful if you could take a look at http://www.ffynnongron.com/leisure.php

I am trying to load a gpsvisualer (or rather google map) as this cannot be done using IFRAME.

The problem is it first loads the first tab (Area) text and map but for some reason a few seconds later the second tab map (Environment) is then overwritten.

Any ideas would be much apprechiated.

Regards
Dave

Reply
matt says

2 September 2010 at 2:18 am

@picknikker: You’re welcome. 🙂

@dave_gordon: Hmm, I can see how that would cause all sorts of problems with the tabs code, since is uses things like document.writeln() to inject more markup into the page. Do the tabs work OK if you strip that JavaScript out?

Looking at it more closely, the Area and Environment tabs basically seem to work, although the content is a bit messed up. The other tabs seem to have no content in – is that because you haven’t added any yet?

(This is on Firefox 4.0 Mac.)

Matt

Reply
dave_gordon says

2 September 2010 at 7:17 am

Hi Matt, and many thanks for your prompt reply.

Yes the tabs themselves seem to work okay, but I think for the environment one I’m missing a DIV somewhere.

I’m trying to find a tool that will assist with the above in indenting the tags but HTMLTidy seems to want to go too far and coment out what it thinks is the addituional tags.

I initially thought this could be the problem with the loading the second map in the first tag, but then ignored due to the fact the first tabs text was still displayed.

In terms of the other pages, I did not want to insert more code until I fixed the problem with the first two tags.

Regards
Dave

Reply
dave_gordon says

2 September 2010 at 3:19 pm

Hi Matt,
I’ve now manually checked the DIV tags and everything is okay.

The previous problem of loading the second tab map into the first tab display is only occuring in FF 3.5.11, and in IE7 the map does not show in the tab.

Is this down to what you suggested previously about document.writeln() within document.writeln()’s, and if so do you know of anyway around this?

Regards
Dave

Reply
dave_gordon says

3 September 2010 at 2:33 pm

Sorry me again. If I understand the processing correctly I think it may work if you only load the the first tab onload, and after each tab is selected run my onunload=”GUnload(); and then load the individual tab once again.

The only problem is I don;t know how to code this.

Many thanks
Dave

Reply
matt says

5 September 2010 at 9:23 pm
@dave_gordon: Just call GUnload() within the JavaScript tabs code as required, eg:
```
    function showTab() {
      GUnload();
      var selectedId = getHash( this.getAttribute('href') );
...
```
(or whatever it is you need to do)
Reply
dave_gordon says

6 September 2010 at 6:33 am

Many thanks Matt, but unfortunately this does not seem to make any difference.

Assuming the script loads everything first, is there anyway to only load the first tab, any then only load the others individually after the tab is selected?

Many thanks
Regards
Dave

Reply
matt says

6 September 2010 at 6:19 pm

@dave_gordon: What do you mean by “load”?

Reply
leo_gatmaytan says

7 September 2010 at 12:48 am

Hi,

I have 2 pages and I inserted the code of each page in the <div></div>

it works. the problem is both pages(now in tabs) have dynamic dropdowns. Now that I inserted both pages in tabs, the dynamic dropdowns doesn’t work on IE but if I use FF it works fine.

Any help on how to make it run on both browsers?

Reply
matt says

7 September 2010 at 1:03 am

@leo_gatmaytan: Please post your question in a new topic, and include a link to the page with the problem.

http://www.elated.com/forums/authoring-and-programming/topic/new/

Reply
dave_gordon says

7 September 2010 at 1:17 am

Hi Matts, and sorry for not making myself clear.

I thought the utility builds ALL the tabs (identified by DIV names) and simply controls what is actually displayed by using the ‘div.tabContent.hide { display: none; }’

Becuase of the way GPSvisualser loads this causes problems, so, if I have understood correctly, rather than build all the tabs, which i presume happens in the function init(), can I only build the first tab, and only upon selecting another run my GUnload(); and then build the tab selected.

Does this make any sense?
Many thanks
Dave

Reply
matt says

7 September 2010 at 6:37 pm
@dave_gordon: Well it’s not really “building” anything. The tabs are already created in the markup. All the JavaScript does is assign different classes to the tabContent divs to show and hide the tabs. That’s it.

Since I don’t know anything about GPSvisualser I can’t explain why it isn’t working. Those writeln()’s sound nasty though. At a guess, GPSvisualser might be overwriting the tabContent divs when it runs. If you bring up the Error Console in Firefox you can see the following errors:
```
Error: contentDivs[id] is null
```
Another thing I’ve noticed is that you’ve created 7 tabs, but only 2 corresponding tabContent divs. You need to create a tabContent div for every single tab, otherwise the init() function will break.
Reply
dave_gordon says

11 September 2010 at 9:40 am

Hi Matt,
Just to let you know everything within the maps is now working. I ended up just using IFAME within the DIV and everything worked.

The previous tab utility I used must have done something peculiar when building the IFRAME string because when I tried to reference objects within the frame did not work. Anyway the maps seem to be working perfectly now (see http://www.ffynnongron.com/leisure.php)

One other small thing. I’m using my own style (.menu2) and for some reason the tabs are not highlighting when selected. Initially i thought it was becuase I used ‘active’ instead of ‘selected’ but even when changed and then even used your names (ul#tabs) in my external .css it does not work.

Could you give me a pointed as to what is wrong?

Many thanks for all you help and do you have a paypal account that I can donate something?

Kind regards
Dave

Reply
matt says

13 September 2010 at 3:11 am
@dave_gordon: Your selected tab’s ‘a’ element has an ‘active’ class, but you haven’t styled that anywhere.

You need to select and style the ‘a’ elements, eg:
```
.menu2 li a.active {...
```
Reply
dave_gordon says

13 September 2010 at 6:50 am

Thanks Matt and thank you vary very very much for all you help and assitance.
Kind regards
Dave

Reply
matt says

14 September 2010 at 9:48 pm

No problem Dave – hope it helped 🙂
Matt

Reply
CCJared says

18 September 2010 at 6:49 am

Hi Matt,

I’m having a problem with this. I’ve got one set of the tabs set up on the link below, but the second set doesn’t work. How can I get two or more sets of tabs working on a page?

http://www.beta.theridefactor.com/guides/tripsdrill/

Reply
devonei says

18 September 2010 at 11:57 pm

Funny CCJared i was just on here searching for the exact same thing! I hope Matt responds soon! 🙂

Reply
matt says

20 September 2010 at 5:56 am

@CCJared and @devonei: See:

http://www.elated.com/forums/topic/4717/#post19137

Reply
CCJared says

20 September 2010 at 9:33 am

Hi Matt, thanks for your help. That worked great, but now I’ve got another issue. The 4th tab on the second set isn’t working.

http://www.beta.theridefactor.com/guides/tripsdrill/

Any ideas?

Reply

matt says

21 September 2010 at 5:40 am

@CCJared: You haven’t closed your previous tabContent div:

<div class="tabContent" id="wr">
<div><a href="mammut/"><img class="vlightbox" src="thumbs/jungbrunnen.jpg" align="right" /></a><a href="mammut/"><strong>Jungbrunnen</strong></a><br /><br />Mammut is the parks 100% German Wooden Roller Coaster, this ride is features a very twisted layout with some nice moments of floater airtime! It's an extremely smooth ride that doesn't let up until it hits the brakes, so be sure to keep your hands up and enjoy!<br /><br /></div>
<div><a href="mammut/"><img class="vlightbox" src="thumbs/mulhbach-fahrt.jpg" align="right" /></a><a href="mammut/"><strong>Mulhbach Fahrt</strong></a><br /><br />Mammut is the parks 100% German Wooden Roller Coaster, this ride is features a very twisted layout with some nice moments of floater airtime! It's an extremely smooth ride that doesn't let up until it hits the brakes, so be sure to keep your hands up and enjoy!<br /><br /></div> 
<div><a href="mammut/"><img class="vlightbox" src="thumbs/waschzuber-rafting.jpg" align="right" /></a><a href="mammut/"><strong>Waschzuber Rafting</strong></a><br /><br />Mammut is the parks 100% German Wooden Roller Coaster, this ride is features a very twisted layout with some nice moments of floater airtime! It's an extremely smooth ride that doesn't let up until it hits the brakes, so be sure to keep your hands up and enjoy!</div>

stsnider says

28 September 2010 at 6:15 pm

My tabs do not work. The tabs look ok, so I feel the CSS code is fine. But when I click on any tab but the first one, nothing happens. The error in IE says:

Message: ‘contentDivs[…]’ is null or not an object
Line: 51
Char: 11
Code: 0
URI: file:///M:/HTM/NDEP/ADMIN/GIS/Scripts/js_functions.js

Line 51 in file js_functions.js is:
contentDivs[id].className = ‘tabContent hide’;

Thanks for any help!

Reply
matt says

29 September 2010 at 6:00 pm

@stsnider: IE is a horrible browser for debugging JavaScript! Try Firefox and use Tools > Error Console.

If you can upload your page and post the URL then we can take a look at the problem. Chances are you’ve mistyped or misspelled one of your content div names.

Reply
stsnider says

30 September 2010 at 11:07 am

I tried Firefox error console. It says “contentDivs[id] is null”. I cannot upload these files to the division’s website until they are functioning, so I copied the files to my google docs. The file structure should be:

index.html
Scripts/js_functions.js
Templates/gis_resources.css

Thanks for your help.

javascript
https://docs.google.com/leaf?id=0BwRWFnLD3lXrMzRkZDc0NjUtMzdkNi00NzVkLTlhODQtOTdlZjJiNmY1ZDMz&hl=en

CSS
https://docs.google.com/leaf?id=0BwRWFnLD3lXrYjBlM2I2MGUtMTY5NS00ZDE2LTlmYTktZGMzNTJmNzQ0OTc2&hl=en

HTML
https://docs.google.com/leaf?id=0BwRWFnLD3lXrZTNhYmExNjUtNjcyYS00Y2ZjLTg5NTgtMjFlNDNhYTVkZmI2&hl=en

Reply
matt says

3 October 2010 at 4:33 pm

@stsnider: Those links don’t work for me.

I can’t do much unless I can see the actual page with the problem. Why not just upload it to a hidden folder on your site?

Might be best to start a new thread too:

http://www.elated.com/forums/authoring-and-programming/topic/new/

Reply
anupam27oct says

23 October 2010 at 5:10 am

Hey Matt,

In my webpage I have multiple tabbed contents but the problem is that only one of it works while the other doesn’t. I changed the id of the 2nd tab content and named it tabs2 and in the javascript page I added the following under Grab the tab links and content divs from the page

var tabListItems = document.getElementById(‘tabs2’).childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems.nodeName == “LI” ) {
var tabLink = getFirstChildWithTagName( tabListItems, ‘A’ );
var id = getHash( tabLink.getAttribute(‘href’) );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}

I didn’t deleted any thing. It worked and both the tab content were working but the problem was that one could view the text of only one tab content at one time and the other meanwhile, disappeared. When clicked on link of another tab content, the content of the first one disappeared. Do you have any solution for webpages having two or more tab contents. My knowledge of Javascript is zero.

Please help its really important. I know you want to close this forum but if you please help me I will be thankful to you. Plz. Plz.

Reply
masaniparesh says

26 October 2010 at 3:21 pm

Hi Matt,

I much appreciate your help throughout here to various users.

My scenario is somewhat different. I have sever html pages in particular folder. I want to write a JAVA Script or whatever that can give me a output as tabbed web page. Each tab is corresponds to my html file. so basically JAVA script should iterate through the folders for html files and generate tab for each html files dynamically.

I have not done much JAVA script so some help on this would be much appreciated.

Thanks.

Reply
matt says

28 October 2010 at 12:01 am

@anupam27oct: I already covered multiple tab sets here:

http://www.elated.com/forums/topic/4717/#post19137

@masaniparesh: Please start a new topic:

http://www.elated.com/forums/authoring-and-programming/topic/new/

Reply
bgood says

1 November 2010 at 6:13 pm

Matt – I’ve been using these tabs for a while now and I have to tell you – the code is great!

Here’s what I’m tring to do: NESTED TABS

For example:

Say I have a page that has 3 tabs (1, 2,and3).
Tabs 1 and 3 have simple content.
However, for Tab 2, I want to display the content in 3 Tabs within it (nested). Let’s say they would be 2A, 2B, and 2C.

I can write the tabs (2A, 2B, and 2C) within the content for Tab 2 and they show up when I am on the page and have selected Tab 2. However, the tab’d content itself is just listed in order down the page – not inside the clickable tabs.

Is there a simple way to accomplish this?

Thanks!

bgood

Reply
matt says

2 November 2010 at 4:30 am

@bgood: Hmm, that’s an interesting one! I suspect if you took the multiple tab sets code at http://www.elated.com/forums/topic/4717/#post19137 and simply put the ‘tabs2’ ul inside your “Tab 2” then it might “just work”. In theory…

Reply
bgood says

2 November 2010 at 1:57 pm

Matt – That works! Thanks.

bgood

Reply
bgood says

3 November 2010 at 1:30 pm

Matt –

OK I used your suggestion (new .css and .js files) and I can now nest tabs within other tabs.

However, I no longer can send a user to the page and include a refference to the tab ID in the link so that the appropriate tab is open when the user arrives.

EXAMPLE:

My page with the tab’d content has the following at the bottom:

<script type=”text/javascript”>
init(‘tabs1’);
window.location.hash = “topofpage”
</script>

This page has only one set of tabs (tabs1).

All tabs (single set or nested) have unique IDs.

If the page had nested tabs it would have the following at the bottom:

<script type=”text/javascript”>
init(‘tabs1’);
init(‘tabs2’);
window.location.hash = “topofpage”
</script>

The “topofpage” used to work to bring the browser window back to the top with the proper tab opened.

If I want the 2nd tab out of 3 to be open I write the link as follows:

<a href=”path/to/webpage/webpage_name.aspx#2″>Link Text</a>

My tabs are declared as:

<ul class=”tabs” id=”tabs1″>
<li><a href=”#1″>One</a></li>
<li><a href=”#2″>Two</a></li>
<li><a href=”#3″>Three</a></li>
</ul>

And the tab’d content is declared as:

<div class=”tabContent” id=”2″>
<h2>Two</h2>
<div>
SOME CONTENT
</div>
</div>

So – when I was using the original code, that didn’t allow nested tabs, my links with specified tab ID’s worked. Now they don’t.

Any advice will be greatrly appreciated.

Thanks!

bgood

[Edited by bgood on 03-Nov-10 13:33]

Reply
matt says

3 November 2010 at 6:20 pm

@bgood: This is getting a bit offtopic. If you can post a new topic about this, and include the URL of your tabs page, then I can take a look:

http://www.elated.com/forums/authoring-and-programming/topic/new/

Cheers,
Matt

Reply
Sprab says

18 November 2010 at 9:52 pm

Hello Matt

I have been using your fantastic script on my site for nearly a year and it’s been working perfectly… until today. I have not made ANY changes to my site, nor are there any error messages, but the script has suddenly stopped functioning (tabs not being hidden) in all browsers.

There are several external javascripts on the page (from Google) and I have tried disabling these (in case of a conflict) but this doesn’t have any effect. I am completely at a loss as I know very little about javascript. If you have any time, could you take a look and see if you spot anything?
http://www.yourkrabi.com/amorn-mansion/

Thank you so much, I know you must be very busy…. but any advice would be great!

Seema

Reply
matt says

18 November 2010 at 10:22 pm
Hi Seema

I think there’s some problem with the body load event not firing (not sure why). Try removing the onload from the <body> tag, so it’s just:
```
<body id="b-hotels">
```
Then just call init() manually after your tabs in the HTML:
```


<script>init();</script>
```
Reply
Sprab says

19 November 2010 at 12:14 am

Hi Matt

Thanks so much, that worked perfectly for your script – now just have to figure out why the change has stopped another function on the page (calcHeight) from working… ah, the trials and tribulations of cut and paste website building 🙂 I need to learn Javascript properly one day!

Thanks again for the support.

S

Reply
cfsamet says

21 November 2010 at 9:57 am

Love this script! Many thanks.

I’ve been working on getting this implemented this morning, and it works wonderfully in IE and Firefox, but doesn’t work in Google Chrome (I get really strange behavior).

I assume I typo’d something, since your demo works just fine in Chrome.

I thought I would post here and ask if you’ve had any trouble with browser compatibility with this?

Reply
cfsamet says

21 November 2010 at 10:11 am

Disregard my last comment there…

Turns out when creating my ul list, I missed the closing anchor tags. IE and Firefox corrected this on their own, Chrome held my feet to the fire (as it should).

I’ve corrected it now, code works in all browsers…

AND I just wanted to say MANY THANKS for this script… it’s a GREAT help!

Charlie

Reply
Sprab says

21 November 2010 at 8:05 pm

Just a quick FYI in case anyone finds this useful: I discovered the reason why the fab tab script suddenly stopped working was a conflict with our OpenX tags (still unexplained as no code had been changed on the page).

I disabled OpenX (and actually switched to DFP because of other issues with this ad server) and the script now works again, with the onload in the body tag as before. Hooray!

Reply
matt says

21 November 2010 at 10:16 pm

@cfsamet & @Sprab: No problem – I’m glad you both got your tabs working 🙂

Reply
Stanley says

4 December 2010 at 7:33 am

Hmm… I posted a question here:

http://www.elated.com/forums/topic/5083/

Not sure whether I should have added it as a comment right here. Basically I want to know if it’s possible to shift the focus to the first form field in whichever tabContent div is selected?

Reply
sahran says

12 December 2010 at 7:01 am

Hi
I followed this great script and adapted it for my need for a facebook page with 7 tabs, the only problem I have after spending numerous hours working on the code and content is that I cannot use the body tag in a facebook applications such as in: <body class=”ul-tabs” onLoad=”init()”> which I am using with this script (I am using clearfix tab) . Is there another way to use this script with changes to the above mentioned function?
I tried several changes however the content of all 7 tabs will show up on one page rather than 7 different pages.
The error I am recieving from facebook “Application Temporarily UnavailableParse errors:FBML Error (line 123): illegal tag “body” under “fb:tab-position”
here the test link i have working ok on my server, thou when I switch to facebook-app it causes the body tag error:

http://www.kansascityproperties.com/www/facebook/app.asp

Any answer/help is much appreciated, I hate to see what I worked on go to waste, thou I am far from finished with polising it up. thx

[Edited by sahran on 12-Dec-10 11:41]

Reply
matt says

13 December 2010 at 2:40 am

@sahran: Since your question is related to Facebook and not specifically about the article itself, please post it in a new topic:

http://www.elated.com/forums/authoring-and-programming/topic/new/

Thanks,
Matt

Reply
trucjensen says

2 January 2011 at 7:29 pm

Hi Matt.

Thanks for this tutorial. It’s an excellent way to teach someone like me some javascript 🙂 – and when it gives some weird behaviour, it’s even better (for the learning part, that is).

My problem is that on my web-site, it’s only the first tab (nyheder) that shows content in IE and Chrome. The other tab (menu) is just blank. In FF both tabs work as expected.

Do You have any suggestions?

The site is http://www.kratholmskolen.dk

(Funny part is that I made a test-site and here it works as intended. The testsite is http://www.kratholm-uv.dk)

Reply
trucjensen says

2 January 2011 at 8:10 pm

Sorry for the inconvenience. I solved the problem. It was a question a missing “>” in a “<br />”-tag. That took me a while to find 🙂

Reply
matt says

6 January 2011 at 11:02 pm

@trucjensen: No problem – glad you got it working 🙂

Reply
pswa61 says

18 March 2011 at 9:01 pm

I give this article a D+, failing grade, i.e. decent effort but you did not complete it nor did you comprehensively test it before you published it.

This does NOT work with block level elements in the div’s.

Also, you obviously did not check this in multiple browsers, the tabs div does not display inline or with any formatting at all for that matter, just 2 ugly blue text links stacked in IE.

Try putting tables in the divs (a legitimate need for more intricate formatting in the div), doesn’t work.

remove div’s & try putting the attributes directly in the table tag, doesn’t work.

I appreciate you *trying* to help, but the internet is so full of half-baked solutions it is becoming more a source of mediocrity than anything else, it seems.

Get back to the drawing board and try again, and this time Take the Time to Test *before* you post.

Reply
matt says

18 March 2011 at 11:37 pm

@pswa61: It works fine with block-level elements – the example even includes block-level elements.

Tables work fine too. Tested in IE7/8/9.

Sounds like there’s some problem with your code or setup to me.

Reply
Stanley says

19 March 2011 at 1:25 am

Hmmm… sounds like the poster two above might not have been totally human. Oh well…

Matt, as the rest of us know this is a GREAT script – and I thought you might like to see how I got JavaScript Tabs to work in conjunction with another great script I found – imageMenu, which is a mootools sliding “concertina” menu.

(note that the jstabs script applies to the row of images underneath the top navigation bar – I’ve used it as a kind of presentation)

You can hover over the images to expand each image or you can click on one of the images to hold it open and jump to the relevant tabContent.

You can have endless hours of fun with it here:

http://www.collents.eu/begin.php

The site’s still under development really but that part of it seems to work quite nicely.

[Edited by Stanley on 19-Mar-11 01:26]

Reply
pswa61 says

19 March 2011 at 10:11 am

Ah, I stand humbly corrected, please excuse the after a long, frustrating day dourness.

My issue remains somewhat mysterious. Stripping everything to bare essentials in the code I got static html to work properly in a flash. The problem was dynamic output from a script I wrote that populated the primary tab. Being by nature very lazy I enclose tag attribute values in single quotes, when I changed the php to output html w/ double quotes it worked like a charm. When I changed it back to single quotes it worked like a charm, but the initial php outputting html attributes w/ single quoted values made it take a dump. I have no idea why.

So before thoroughly evaluating the issue I came here and took a dump.

Sorry, folks, it ain’t pretty, but it happens.

Reply
matt says

20 March 2011 at 7:40 pm

@Stanley: Wow, that’s a great use of the tabs script! Love it 🙂

@pswa61: No problem – good on you for coming back and apologizing, so many people would never bother! 🙂 Hope you manage to solve the PHP problem – feel free to ask for help in our Authoring & Programming forum if you need it:

http://www.elated.com/forums/authoring-and-programming/topic/new/

Cheers,
Matt

Reply
midtoad says

26 March 2011 at 11:41 pm

Matt, I have a question about updating content in tabs when they are clicked on. An example may help:
In my first tab, I have a form that, when submitted, causes a Javascript function to be executed and results displayed in a table in that tab. So far, so good. Now, the challenge is that I want one of those calculations to be used to change a result in another tab. When I go to that other tab, the result is not updated.

Any suggestions as to how I could achieve this?

thanks
Stewart

Reply
Stanley says

27 March 2011 at 2:28 am

@midtoad

Sorry for jumping in ahead of Matt here, who may have a better idea, but to try and help you along a bit what I would do is temporarily disable the jtabs script (so all the tabContent divs are shown one after the other down the page) and proceed from there.

When you can get it to work on that single static page then it should work when you re-enable the JavaScript Tabs script.

Reply
midtoad says

27 March 2011 at 10:24 am

@Stanley, are you really in Tbilisi?

Your comment actually is quite helpful, as it’s led me to recall that the tabs are really just divs on a single page. So there should be no magic in making content in one tab appear in another.

Before your comment arrived, I had developed a work-around. I put an Update button in each tab, and wired it to a function that pushed out new data to an <input> in that tab. But now, thanks to your comment, I realise that all I likely have to do is, in the first tab where I make the calculations happen with an Apply button, simply add lines to my javascript function to also update the input fields in all of the other tabs.

For the benefit of those looking to apply this type of concept, the details are the following:

Where I want the new data to appear, I place an <input> tag:
<p>Given your configuration, you have <input type=”text” id=”sp_skids” size=”4″ maxlength=”6″ value=”” readonly> skid patches. </p>

Note the id, since that’s the key to publishing new data into the input field.

The button that causes the tab to update is this:
<input type=”button” name=”submit” value=”Update” onclick=”getSkidPatches(‘sp_skids’);”/>

Note that the id of the input field is passed as a parameter in the javascript function call.

And lastly, here is the function that fetches the new data and publishes it:

function getSkidPatches(spu) {
document.getElementById(spu).value = window.skidPatches;
}

Note that the parameter name in the function doesn’t have to match the name in the call. Just make sure that you don’t place quotes around the name (i.e. ‘spu’) or it won’t work!

The variable skidPatches actually gets updated in my first tab thanks to an Apply button calling a function that makes a number of calculations, but that’s outside the scope of this comment.

cheers
S

Reply
midtoad says

27 March 2011 at 4:09 pm

Following up on my earlier comment, I made the change I suggested I made in the first paragraph that I thought might be needed, and now all my tabs update their calculated data.

@Stanley, the take-away message would be: it’s always worthwhile for us to comment on problems others post, because even if we are off the mark, the simple fact of having to understand and reflect on a suggestion sometimes causes us to think about our problem differently and thus find the solution ourselves.

thanks again!
S

Reply
Stanley says

27 March 2011 at 5:53 pm

Glad to help and, yes, I live in Tbilisi.

Reply
jschatesjscript says

1 April 2011 at 9:56 am

this is a neat looking script and im sure it will fit my needs.. however it currently does not. I am using coldfusion (the part where everyone usually runs away and doesnt want to help), but im just using simple form submission and some of the forms are just html forms. basically I need to submit the form and have it jump to another tab, not including all of the tabs, that is.. jump to a tab based on div id for a search or form submission result and not show the other tabs. I am having a lot of trouble with tab control, and not showing other ones (it shows them all). Yes I can click between them all seperately and everything works just fine, but I want to hit submit on a search form on tab one, have it submit to tab 2, and have everything else not show. I have some if statements that elimate this, but not all of it. Also, before you clear the search results, which there is a button for, I want to be able to just click between all the tabs at will, not showing the other ones, and have the result still be there. I know it is just something funky in the javascript itself preventing this and showing all the pages when i submit the form, because i accomplished this same thing on a crappy looking, buggy tab template called tabtastic before. any ideas anyone? dont be scared off by the coldfusion, most of them are just standard html forms that submit, not even coldfusion. its the javascript itself at some level preventing this.

Reply
Stanley says

1 April 2011 at 1:38 pm

@jschatesjscript – Does the question posted on the 8th September (scroll up) help you – and the subsequent posts?

Also my own question here might help you further develop/debug what you’re doing:

http://www.elated.com/forums/topic/5083/

Reply
jschatesjscript says

1 April 2011 at 2:58 pm

@Stanley. Well that stuff helped me to actually click on the tabs and have seperate content per div show, before I wasnt even that far, so we are good there, the first page also loads with just the content of the first div.

However, the form submission is still the problem. Any help would be much appreciated.

I could throw all/most of my code up here. I have if statements to help some of the form and div flow, and this worked before on a much uglier tab program, which was not this one. I know its a javascript problem of some kind, and Im not proficient enough with it to figure out where.

Reply
Stanley says

1 April 2011 at 4:20 pm

I’m no expert in javascript either, but I presume the action on your form points to the full page address followed by the #divname, e.g mytabbedpage.html#divtwo, so the page actually reloads and processes the search value?

Reply
Stanley says

1 April 2011 at 4:47 pm
I just did a very quick test to try out what I was thinking above.

I put a dummy search form on my page like so:
```
<form action="index.php#searchresult" method="POST" name="searchform">
Search for: <input type="text" name="keyword" Value="">
<input type="submit"></form>
```
At the top of the page I added my form handling script (in my case just to capture the keyword value and assign it to a variable) then within my searchresult div I echoed the variable.

When I entered a search term and clicked submit it displayed the just the searchresult tabContent div with the keyword.

Is that what you were looking to do (except with more complex form processing)?
Reply
jschatesjscript says

1 April 2011 at 4:55 pm

Yes.

And what script did you modify?

Reply
midtoad says

2 April 2011 at 9:43 am

@jshatesjscript:

Replying to your first post – if your tabs display properly initially, but when you click on Submit all of the tabs display as one big page, then your problem is in your javascript. I have found that any errors at all in my javascript cause the tabs to no longer display as tabs, but instead show as a single long web page.

S

Reply
Stanley says

2 April 2011 at 12:30 pm

It’s been a long time since I put this script together and never really used it in a real situation (apart from the aforementioned test form) but see the link on this page for the javascript I used to link to individual tabs…

http://www.collents.eu/cem/tatep/index.php/jtabs/

I give no guarantee that it’ll work for you, but you can try it.

Good luck.

Reply
jschatesjscript says

4 April 2011 at 11:00 am

@stanley 02-Apr-11 12:30.

It thorws me errors: ‘contentDivs[…]’ is null or not an object. like 5 or so of them, different lines.

Also, the item is posting to the other tab, just not jumping over there physically, like i wanted.

aka, i have a search and result tab. the search tab when posted should jump to the result tab, this does not happen. if i click on the result tab, which is the second tab and it says, you need to do a seach first, the form there, WILL work and go back to the first tab, but it need it to work the other way too where the search tab which is first, jumps to result.

Reply
jschatesjscript says

4 April 2011 at 11:13 am

I think I have to put the class name of some of these in to get it to work, but the problem i see is i put the class name of the div tags in all of them, and it wont let me click between tabs though. totally stuck here.

Reply
Stanley says

4 April 2011 at 1:10 pm

As I said it’s a long time since I worked on that so my memory of what it does is a little rusty. As far as I can tell the page structure is the same as in a regular JavaScript tabs page: “tabContent” set as the class on each tabContent div, and an ID which is the same as is shown in your tab menu list.

I’m not quite sure what you mean by jumping over to the other tab – unless you mean simply displaying that tab’s div instead of the one you were currently on, but that doesn’t reload the page to process your form data – the normal operation of the JavaScript Tabs page is that it loads up once and then you click on the tabs to display/hide the relevant tab content.

What I think you want is to retain that instant action but include your search result – but how would you do that? You need to post the form to the same page and have it open up your search result tab.

Reply
jschatesjscript says

4 April 2011 at 1:30 pm

I think I may abandon this script. Too much javascript to worry about, and for my liking.

Yes @stanley last comment. I do post to the same page and have it open in the result tab, but it does not show. The id thing you mentioned makes sense, I may still try that. The result WILL show if I manually click on the result tab. I had this same whole site in another tab system and it worked good except for some design flaws, one of which I actually solved today, and that is one of the reasons I might abandon this script.

The other reason is, it does not solve one of my original problems, and is therefore not worth it. The other original problem was that (and this is on the old template I used, not this one, but the problem persists on this template), I do a search, it posts to the result tab, and if there are too many results, it just drops to the content, eliminating the tabs at the top and the desired effect.— IS there a javascript thing to eliminate THIS, and a short one if that.

Reply
Stanley says

4 April 2011 at 4:26 pm

Ok, well as I said at the start I’m no expert in JavaScript – I just hack things around until they work (or give up too).

All I can say is that if you’re posting to the same page and your result tab is opening – but there are no results – then I’d suspect something else in your page is going wrong: it sounds like the javascript is doing its job and the problem may lie elsewhere in your form handling & results display code.

Sorry I couldn’t help you resolve it.

[Edited by Stanley on 04-Apr-11 16:26]

Reply
jschatesjscript says

4 April 2011 at 8:36 pm

@Stanley –No the results are showing, you didnt fully read my last one or maybe I wasnt clear. The tab isnt changing as it should to the results tab. The javascript is wrong. Nothing is wrong with the form at all. I am using my older template to try to solve this.

However, I have found on this one and the other that, the biggest problem I have is that (and even on this template), if the results tab has TOO many results the page then scrolls downward and shifts out of focus of the tabs which can then be scrolled back up to. I need it to function to jump to divs as clicked or submitted from a a form. But I need it to always start at the top tabs too, even if there are lots of search results. Any ideas on this?

Reply
Stanley says

5 April 2011 at 1:34 am

With regards to your page scrolling down to the end when you display a lot of results I think we’re getting a little off-topic here, but maybe this will help:

http://articles.sitepoint.com/article/preserve-page-scroll-position

Reply
jschatesjscript says

5 April 2011 at 10:22 am

Yeah.. that didnt do anything at all. I give up.

Reply
panos_pap says

6 April 2011 at 11:19 am

I used the code above and it was really very useful to me. But I have a question for you.
Let ‘s assume that I have the 3 tabs created and in the contentDiv of the second tab I want to put a link to another page.
The page that I want to jump to, should have the same interface (the three tabs) but I want from this page to focus on the second tab, not the first which is the default. Is that possible?
..sorry for my english..

Reply
panos_pap says

6 April 2011 at 11:49 am

When I say ‘focus on the second tab’ I mean that the contentDiv of this tab has to be visible and the other contentDivs have to be hidden.

Reply
jschatesjscript says

6 April 2011 at 12:04 pm

@panos_pap. Are you talking to me? I need yes, a form submit that jumps to another tab, or even the ability to have hyperlinks. But when I am on another tab, it shifts focus, the others arent hidden, just showing. Anyone out there that can help would be greatly appreciated.

Reply

midtoad says

6 April 2011 at 1:37 pm

To learn how to jump to another tab after performing some calculation, just re-read the original article and look at the javascript that sets up the tabs in the first place. The showTab function reacts to a click on the tab’s title bar, extracts the URL of that tab, strips off the # target, and jumps to the corresponding div, using CSS to hide the other divs. In reality, everything is all on one page, just not all visible at one time thanks to CSS. (If you screw up the javascript, then you see all the tabs at once, one below the other).

In the first tab (“#about”), add the following example form with two buttons. One fetches inputs and displays results (and stores the result for display on another tab), while the other button simply jumps to another tab (where the results are displayed).

Here’s the form:

 <p><form name="Exercise_1"><b>Exercise 1:</b><br><br>
<tt>string1:</tt> <input name="string1" value="This is">
<tt>string2:</tt> <input name="string2" value="really cool!"><p>
<tt>combined string1 + ' ' + string2:</tt> <input name="showMeArea" readonly="true"><br>
<input type="button" value="Combine Strings"
		 OnClick="var results=string1.value + ' ' + string2.value;showMeArea.value=results;document.getElementById('results_box').innerHTML=results;" ></p>
<p><form name="Jump"><input type="button" value="Jump"
		 OnClick="showTab2('#usage');" ></p>
		 </form></p>

The key thing is that we need a new javascript function that is similar to the showTab function, but instead of fetching and parsing the URL of the object that was clicked on, it is handed as a parameter the URL to use. Here is the new showTab2 function:

    function showTab2(goto) {
          var selectedId = getHash( goto );	
      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }
      // Stop the browser following the link
      return false;
    }

Lastly, we need some place in the other tab to put the results:

<p><h3>Results</h3><br><br>
<tt>results:</tt> <span id="results_box"> </span>.</p>

I tested this and it works for me.

SBrentnall says

21 April 2011 at 9:35 pm

Love this article–helped me solve something that’s been bugging me for days.

i’ve run into one snag: how to I create two different sets of tabs on the same page? I’m just learning javascript so I’d appreciate being pointed in the right direction.

Thanks!

Reply
matt says

25 April 2011 at 4:37 am

@SBrentnall: Thanks – glad you liked it! I already posted a solution for multiple sets of tabs earlier in the thread:

http://www.elated.com/forums/topic/4717/#post19137

Cheers,
Matt

Reply
SBrentnall says

25 April 2011 at 12:37 pm

Got it–thanks so much, Matt.

Reply
Jason92s says

29 April 2011 at 1:41 pm

Great article! One question, and I apologize if it’s already been addressed and I overlooked it, but is there a way to have a specific tab open up via a URL that exists on a different page? For example, could I type in a URL that opens the second tab in the example (The Advantage of Tabs) instead of the first tab? Probably not possible, but just curious. I tried going to: http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html#advantages but it just opens the first tab. Thank you.

Reply
matt says

2 May 2011 at 1:56 am

@Jason92s: Yes – see here:

http://www.elated.com/forums/topic/4717/#post18005

Cheers!
Matt

Reply
ortizdupri says

18 May 2011 at 1:27 pm
So, running into two issues – first of all, here’s the page I’m implementing tabs on:

http://www.kyleconrad.com/freelance/expovision/storefront/hotel-single-tab.html

Issue 1 – can’t get the tabs to overlap the border on the tabcontent divs, so the border never goes away. I know it’s a matter of positioning, but no matter what I do, I can’t seem to make it so that the selected tab appears to have a simple white background in conjunction with the tab display as opposed to separated by a border. Here’s the CSS used on the tabs (as you can see if you view source on that page as well):
```
ul#tabs {
	list-style-type: none;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 20px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 3px;
	padding-left: 0;
}
ul#tabs li {
	display: inline;
}
ul#tabs li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #666;
	background-color: #FFF;
	border: 1px solid #666;
	border-bottom: none;
	text-decoration: none;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	behavior: url(PIE.php);
}
ul#tabs li a:hover {
	background-color: #ebf4ff;
	color: #0071fe;
}
ul#tabs li a.selected {
	color: #666;
	background-color: #FFF;
}
```
Issue 2 – the bigger one. As you can see when you click on the tabs, it loads the content of the desired tab, but none of the actual styling within. I’ve been messing with this for over an hour now and cannot figure out where the error is that’s causing the tab content to not load according to the CSS rules in place – upon initially loading, the first tab appears to follow all of the specifications, but then when clicking over to the next tab, it all goes to shit – specifically the border, the P tags, and the list on the second tab. For some reason, the img places in the third tag works fine according to the CSS class it is assigned, but none of the other rules in place take effect.

Issue 3 – minor, but still confusing – I can’t scroll down on the smaller tabs (such as the first and third ones)? The scrollbar appears on the right, but when I go to scroll, it won’t let me and makes it stay at the top.

Anyone able to help on any of these issues? Thanks in advance.
Reply
matt says

19 May 2011 at 7:18 am

@ortizdupri:

Issue 1 – Your tabs look fine to me in all the browsers I’ve tested (FF4 Win/Mac, Safari Mac, Opera Mac, IE9 Win). What browser(s) are you testing with?

Issue 2 – I’m not sure what styling you mean, but the content looks OK to me. If I switch from tab 1 to, say, tab 2 then back to tab 1, then tab 1’s content looks exactly the same as it did when the page loaded.

Issue 3 – The browser scrollbar? Works fine for me in all browsers I’ve tested.

Reply
ortizdupri says

19 May 2011 at 8:02 am

@ Matt –

Thanks, yeah I actually went back through and cleaned some stuff up and kind of did workarounds for the issues.

1 – It was initially a problem in Chrome and FF4, but I just used a different method to render the line – a background border in a DIV behind the tabs, and that seemed to work.

2 – my “tabcontent” class wasn’t seeming to affect the content of the tabs when they got pulled up, so I went back through and affected the individual elements – i.e. the p tag and what not – with classes. That seemed to fix my issue that I was having. Definitely not as easy and more of a workaround, but whatever works.

3 – I figured out that it was an issue with Javascript elsewhere on the page, something having to do with a DIV that’s supposed to “stick” to its position. Once I took out that element, the scrolling works fine.

Took some jimmying with the coding and all that, but it seems to all be working now!

Reply
matt says

19 May 2011 at 11:51 pm

@ortizdupri: Ah, I see. Glad it all works OK now 🙂

Reply
Jason92s says

24 May 2011 at 11:04 am

Matt, I’m sorry, I must be missing something here. I made the two changes per this post:

http://www.elated.com/forums/topic/4717/#post18005

My URL to my tab page is:

http://www.csm.ca.gov/csmint/tabs/

If I click on the “test link” link under the “Claims Info” tab it should go to the Documents tab but nothing is happening. I know it’s something simple I’m missing, just can’t figure out what.

Thank you.

Reply
matt says

27 May 2011 at 3:49 am

@Jason92s: You didn’t add the 1st code snippet at the end of init(). You added it outside of init().

Also it looks like you’re trying to link to one tab from within another tab. To do this, you’ll need to add click event handlers to your links, as I outlined in this reply:

http://www.elated.com/forums/topic/4717/#post18939

Cheers,
Matt

Reply
Jason92s says

6 June 2011 at 5:44 pm

Thank you Matt, works great! Really like this script!

Reply
matt says

7 June 2011 at 6:59 am

@Jason92s: Great stuff – glad you got it working 🙂

Reply
RoryTheRoman says

23 June 2011 at 2:10 pm

Hi Matt,
I skimmed the above questions and didn’t see this addressed, if it was, I apologize.

I’m relatively new to javascript and css, but on my site, I have a lot of tabs, so it ends up running into the next line, but starts about halfway down the first row of tabs, making them unreadable. Is there anyway I could either completely separate these rows, or create a scrolling system (something like how firefox deals with tabbed browsing when you have many tabs open)?

Thanks

Reply
matt says

23 June 2011 at 10:51 pm

@RoryTheRoman: If I understand your question, then you could wrap the whole thing in a div and set overflow: scroll on the div. The user could then scroll left and right to view all the tabs.

It might be better, though, to try to group your tabs into separate pages of tabs so it’s less overwhelming for the user.

Cheers,
Matt

Reply
RoryTheRoman says

24 June 2011 at 12:23 pm

After trying out the scrolling, and reading through some of your previous responses, I decided it would look better to use nested tabs that you described above. It worked perfectly.

Thanks

Reply
matt says

27 June 2011 at 10:29 pm

@RoryTheRoman: Sounds like a good plan! Glad you got it working.

Reply
Ian says

18 July 2011 at 10:10 am

Thanks for the script.

However I have come across one issue. Not sure if there is a solution.

If I have a Google map in one of the tabs, then only a fraction of the tab is loaded (top left). The JS for the map is initialized in the head after the init for the tabs. If I do it the other way round it makes no difference.

If I put the google map on the first tab all is fine and the tabs are all okay. However I would rather not have it on the first tab.

Is there any solution to this, where another JS is used within the tabs.

Thanks.

Reply
matt says

18 July 2011 at 11:57 pm
Hi Ian,

Hmm, not sure. You could try putting the call to init() at the end of your markup, before the </body> tag, instead of as an onload handler in the <body> tag?
```
<script>init();</script>
</body>
```
Reply
Ian says

19 July 2011 at 1:36 am

Thanks. But it didn’t work – can’t believe I am the only person with this issue, so will hunt around the net.

Keep up the good work 🙂

Reply
PEJK1953 says

21 July 2011 at 9:01 am

I was looking for an ‘easy intro’ to make a set of tabs in an HTML page and this is perfect. I am not looking for rocket science, but this would have taken me days to put together. Thanks a million for a great starter pack. 🙂

Reply
matt says

22 July 2011 at 12:11 am

@Ian: It may be that the Google JavaScript is simply incompatible with the JavaScript to create the tabs. Or you may need to call a function in the Google JS to kick it off once the tab is loaded or displayed.

Also check your JavaScript console for errors.

@PEJK1953: You’re welcome – thanks for your comment 🙂

Reply

Ian says

24 July 2011 at 10:46 am

Re jumping straight to a tab.

http://www.elated.com/forums/topic/4717/#post18005

I cannot get this to work & wanted to make sure I have the code in the correct place.

The 7 lines should look like (I assume)

// If a hash was supplied in the page URL,
      // display the corresponding tab (if found)
      if ( document.location.hash ) showTab( document.location.hash.substring(1) );
    }
 
    function showTab( selectedId ) {
      if ( typeof selectedId != 'string' ) var selectedId = getHash( this.getAttribute('href') );

Stanley says

6 August 2011 at 12:22 pm
@Ian

Did you add onclick to the link you use to jump to a particular tab? I ran into that issue a few weeks ago – take a look at the following page and see the source of the link which is shown on the third tab where it says “Jump to GBP”.

http://www.collents.eu/ge-economy.php

That link is like so:
```
<a href='#GBP' onclick='return showTab(this)'>Jump to GBP</a>
```
Reply
mrsa says

30 October 2011 at 6:19 am

Dear Elated, I’m working on my websitemakerscript and want to sell it through the internet and would like to use this *tab*-script as mentioned above, but need to know if I may do so, i.e. what about license etc?

Hope to hear from you,

best regards,
mrsa

Reply
Asa says

31 October 2011 at 8:11 am

It is cool!

Reply
matt says

2 November 2011 at 3:06 am

@mrsa: Fine by me! If you use the code then a credit/link to http://www.elated.com would be appreciated.

@Asa: Thanks 🙂

Reply
dsol828 says

8 November 2011 at 2:06 am

Great script!

Question, I have searched but had trouble finding a solution.
What is the easiest way to have the page load on the second tab.

I want to keep my tab order (1,2,3) but load with that second (middle) tab visible.

I’ve seen people changing the JS to allow for url’s with the tab name, but that doesn’t quite seem like the best solution for me.

Thanks in advance for your help!

Reply
matt says

11 November 2011 at 3:28 am
dsol828: To display a different tab by default when the page loads, you should be able to change just these 2 lines of code:
```
        if ( i == 0 ) tabLinks[id].className = 'selected';
```
```
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
```
Just change the 0 (zero) to the index of the tab you’d like to display (0=first tab, 1=second tab etc).
Reply
dsol828 says

11 November 2011 at 11:09 pm

@matt

That did the trick! Thanks for the help!

Reply
kcran says

17 November 2011 at 3:00 pm

I’m having problems jumping to a tab from another html page. The links at at the bottom right side of the index page. I’ve tried to modify the script as shown in earlier posts but it’s not working for me. Please take a look and let me know how to fix. Thanks!

http://rancudo.com/testing/

Reply
matt says

18 November 2011 at 12:47 am

@dsol828: You’re welcome 🙂

@kcran: If you just make the 2 modifications shown in http://www.elated.com/forums/topic/4717/#post18005 then it should work.

Reply

kcran says

18 November 2011 at 7:16 am

Matt,
I had made the modification from post18005 already. The result is that it goes to the tab but does not load the related div content for that tab but just leaves an empty page.

Here’s the header code from the page for you to examine…

    <script type="text/javascript">
    //<![CDATA[

    var tabLinks = new Array();
    var contentDivs = new Array();

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems.nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems, 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
		  
		  
		  // If a hash was supplied in the page URL,
      // display the corresponding tab (if found)
      if ( document.location.hash ) showTab( document.location.hash.substring(1) );
  
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( id == "caracteristicas" ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( id != "caracteristicas" ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
	}
	
	  
//  function showTab() {
//     var selectedId = getHash( this.getAttribute('href') );

 function showTab( selectedId ) {
      if ( typeof selectedId != 'string' ) var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes.nodeName == tagName ) return element.childNodes;
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

    //]]>
</script>

matt says

21 November 2011 at 11:54 pm

@kcran: No idea then. That mod works for me. You might have other JS in the page that is conflicting. Try running init() at the end of your page within a script tag, instead of as the body load handler. That sometimes works. You can also use console.log() to log debug messages to the browser console, so you can see which parts of the code are (or aren’t) running.

Reply
mfouwaaz says

3 January 2012 at 8:33 am

Thank you very much Matt — this is Just what I was looking for and it works beautifully!

Do you know of a way to remove the hash from the URL? I have to work on that part now. Just trying to tweak the js and hoping that someone else has done it already.

Reply
matt says

11 January 2012 at 4:43 pm

@mfouwaaz: What URL? The URLs inside the links to the tabs? Why would you want to remove the hashes?

Reply
MediumAdPro says

2 May 2012 at 9:37 pm

Good script. Thank you for sharing it!
I believe I had it working fine at a point, but I made the page into a Microsoft Dynamic Web Template, and tested it again.

Now I’m getting a result where after choosing a tab, the page scrolls down. In Chrome and Safari it scrolls down to cover the header, on iPhone Safari and IE it scrolls down to the selected tab content…

Any ideas?

The page in question is below

http://traversecityinformation.com/xPHP/TraverseCityInformation/A%20Listing/index_copy(2).html

Thanks for your consideration.

Reply
MediumAdPro says

5 May 2012 at 1:01 pm

NEVER MIND…
Although 5 out of 6 tabs had tab content on the page, I made the sixth a link to an outside page.

Lesson, don’t take a line and link to another page.

Thanks again!

Reply
Alexio says

9 August 2012 at 9:49 am

Love the code for tabs.
Have one question. How do you set the width of the tabs? I have tried to edit the tabcontent class and the only option I have is auto and inherit.
The data on the tab does not fill the whole tab and need to make the tab narrow and not fill the whole screen.

Reply
Stanley says

9 August 2012 at 11:24 am
@Alexio

Just another javascript tabs fan passing through here… but I’ll try and help.

You just need to edit the css, but it sounds like something’s going wrong if you say your tabs are filling up the whole screen. Do your tabs look anything like the demo version here?

http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html

If you look at the source code for that page you’ll see the 4th line in the css starting ul#tabs li a {

Just change it to read:
```
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em 0.6em; text-decoration: none; }
```
You’ll see the ul#tabs li a.selected line already has different padding set for the selected tab. You’ll just need to play about with these to suit your own preference.

Just a thought but are you trying to edit the css directly in your page file, or through your web browser’s element inspector?

If it’s any help you can do what I do when I want to quickly experiment with changing stuff like this – if you have the Opera browser installed and then right click to view the page source you can make any changes you like in the HTML then click on the “Apply Changes” button at the top of the source viewer then go back to the tab with the page on to see what your changes did. If you refresh the page it’ll just go back to whatever the original settings.

If you can’t sort it out can you post a link to your page?

Hope this helps.
Reply
Alexio says

9 August 2012 at 11:33 am

I think I should clarify a little better.
It is not the tab headings however it is the div.tabContent class that I want to modify. I need the tab content frame to be narrower. I have tried to adjust the right margin to make it more narrow and seems to work. However I think there should be a setting to set the width of the content page. It seem s to deafult to 100% width.

Reply
Stanley says

9 August 2012 at 11:38 am
Try adding width to the tabContent class, like this (which works on Matt’s demo page):
```
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; width:75%;}
```
Reply
Alexio says

9 August 2012 at 11:51 am

That seems to work however I am concerned with users having different size windows like they do in our work environment. Smaller windows will reduce the width of the frame and appear to change the layout of the content on the tab. Is there a way to hard code a set width and not a percentage of the visable window width? I am using the tabs on an electronic eform and other content of the form does not fill the width of the screen and is set at a fixed width. I need the tab content frame to match.

Reply

Stanley says

9 August 2012 at 1:00 pm

Yes, you can just set it to a fixed pixel size instead, e.g.

div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; width:450px;}

Alexio says

9 August 2012 at 1:08 pm

Worked like a charm.
Thanks alot!

Reply
Stanley says

9 August 2012 at 1:13 pm

You’re welcome 🙂

Reply
Stanley says

21 August 2012 at 8:56 am

Hey Matt, this was the gift which just keeps on giving.

Here’s a shameless plug for my latest effort, javascript tabs full of multi-lingual goodness!

http://cels.collents.eu/

The link at the bottom of the page demonstrates how to open up another tab (in this case the contact tab).

In case you or anyone is interested the site uses a JSON language switcher which works pretty well – no ugly urls and the site appears by default in whichever language the visitor has set as the preferred language in their browser.

I’ve also got it to hide a tab for English readers and show it for everyone else, something I’ll be expanding the use of with this particular site.

Reply
TimothyV says

5 September 2012 at 9:09 am

Great work – Thank you!

Sorry but maybe I missed it. I would like to use this for ASP.Net and am trying to figure out if I can switch to another tab from code in the code behind page?

Can anyone please help?

Thank you in advance.

Reply
chrishirst says

5 September 2012 at 3:56 pm

You can’t.

javascript is client-side and ASP.NET is server-side which runs and is completed before javascript even starts to load.

Reply
Stanley says

6 September 2012 at 10:59 am

You can’t? I know next to nothing about ASP.NET but I was bit surprised at that so I went looking. It says here that you can add javascript to your ASP.NET code.

http://ondotnet.com/pub/a/dotnet/2003/09/15/aspnet.html

Is it not possible with a bit of jiggery-pokery, or am I missing something?

(edit) “which runs and is completed before javascript even starts to load” may be what I’m missing!

[Edited by Stanley on 06-Sep-12 17:03]

Reply
chrishirst says

7 September 2012 at 1:12 pm

Yes you can deliver javascript to the browser, in exactly the same way you can deliver HTML, CSS, Flash, Images, etc. etc.

In ASP.NET the “code behind” runs on the server before the resulting HTML is sent to the user agent.

ASP.NET cannot “switch tabs” without the user agent making another request to the server for the content to be displayed.

Reply
pepper116 says

10 September 2012 at 12:35 pm
Hi Matt,

A big thank you for creating this script and posting so many helpful responses to questions. I’ve utilized the code on a website that is currently under development successfully but only noticed a small problem today when I put more content in one of the tabs.

The content (just text) runs to a goodish number of lines meaning you have to scroll down the page. I’ve placed a ‘Go to the next tab’ link at the bottom of this text as per your instructions.
```
<p><a onclick="return showTab(this)" href="#tab2">Go to the next tab</a>
```
This works just fine but unfortunately does not scroll the page up. Because there is less content on in the second tab users have to manually scroll up the page to view it. Not a massive deal i’m sure you will agree (!) but none-the-less not ideal.

I’ve spent a good few hours hunting around this forum and other websites experimenting but have yet to resolve it.

As this is the final tweak to what otherwise is a superb addition to my website I was hoping you would be able to suggest a solution.

Any help gratefully received!!

Thanks in advance.

Alex
Reply
matt says

11 September 2012 at 7:08 am

@pepper116: You can use the scrollTo() method to scroll the viewport up to the top of your tabs after switching tabs:

http://www.w3schools.com/jsref/met_win_scrollto.asp

Reply
JP says

31 March 2013 at 2:42 pm

Hi Matt,

I tried using your JavaScript tabbed content as a crutch to provide translations for article descriptions since the webshop I decided to use does not come with multilingual support. The problem now is that as soon as when I start using the script for a second product, the script does not work anymore but only works for the first product.

To solve this problem I dug all the way through this thread and stumbled over how you explained to use the script with several different tabbed areas on one page. I tried that solution (although it is like a hamster trying to build a spaceship with me – I am not programmer) but did not get it to work. It would also be good if the solution could work as independently as possible and would not need explicit variables to be declared and the likes.

When I looked around further, I also came across using CSS to solve my problem, but that seemed to work even less. Now I am pretty lost how I can actually solve this problem so that I can just add articles and such without having to keep track of what number of variable I call or something. Is using JavaScript even still the proper solution? The only thing I know is that I am pretty lost with this 🙂

Would you have a sixth grade solution for me how I can solve this? You can find the page I am working on under http://comficare.jimdo.com/deutsch/shop/

It would be really great if you could help me sort this out.

Thank you,
JP

Reply
Stanley says

1 April 2013 at 5:37 am

JP,

I’m not sure if this will help but here’s a working example of a page with a 2nd set of tabs – you will see them if you click on the “Services” tab (i.e. the 2nd tab – it may display in another language when you land there, depending on your browser’s language preference setting).

http://cels.collents.eu

This example includes translation as well, by the way, and might give you an idea how to structure and translate your own site a little differently.

You can grab the jstab source file by looking at the page source code.

The translation system used is pretty much as is described here:

http://www.mind-it.info/2010/02/22/a-simple-approach-to-localization-in-php/?replytocom=23

Good luck!

Reply
JP says

1 April 2013 at 4:31 pm

Hello Stanley,

Thank you very much for your quick feedback. I tried using that solution but somehow I could not get that to work either. The tabs were never styled as tabs but only as list items.

I think that is related to the page being hosted by Jimdo and them disabling a lot of script functionalities. I saw a solution by another Jimdo page that works based on jQuery. However, no matter how hard I tried, I could not get it to work.

Here is a link to the page with the working tabs hosted on Jimdo:
http://www.pictoo.be/wall-art/play/lego-vintage-1/#cc-m-product-5526255517

So if you could give me advice on how to implement that, I would be really grateful.

Thank you,
JP

Reply
chynawhyte says

25 April 2013 at 7:34 am

This is a great post and I love this tabs example!

Is there a way to make the tabs scrollable? I have quite a few tabs and I’d like the user to be able to scroll to the right or left to get the tabe they are looking for.

Reply
matt says

29 April 2013 at 11:27 pm

@JP: Looks like that page uses jQuery UI’s tabs, if that helps? http://jqueryui.com/tabs/

@chynawhyte: You could try wrapping the tabs in a parent div using overflow: scroll, or perhaps in an iframe?

Reply

radenweb says

7 November 2013 at 8:06 pm

hey mate thank for that grate help but i have an issue, for some reason, it’s not switching from tab to tab. I’ve copy the code exactly and it’s not working aim i missing some thing

here the java script

<script type="text/javascript">
//<![CDATA[
var tabLinks = new Array();
var contentDivs = new Array();
function init() {
// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems.nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems, 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}
// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;
for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}
// Hide all content divs except the first
var i = 0;
for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}
function showTab() {
var selectedId = getHash( this.getAttribute('href') );
// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
// Stop the browser following the link
return false;
}
function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes.nodeName == tagName ) return element.childNodes;
}
}
function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}
//]]>
</script>

here the html

<td >
                    <ul id="tabs">
            <li>
            <a class="selected" href="#cart">About JavaScript tabs</a>
            </li>
            <li>
            <a href="#summary">Advantages of tabs</a>
            </li>
            </ul>
                       
                                           <div id="about" class="tabContent">
                    <h2>Product Info</h2>
                    <div>
                    <p>this is where we willl add to cart, price of info and how qunity amount info.</p>
                    						</div>
                    </div>
                
                                    <div id="advantages" class="tabContent hide">
                    <h2>Advantages of tabs</h2>
                    <div>
                    <p>here will be a quick summry on out product</p>
                    </div>
                    				</div>
                       
  
      
            	</td>

I’m kinda new to all this stuff i done a short 3 month course on everything and self thought my most of the thing I know.

so too some of you out there out of this may sound like a stupid question but please help me.

NathanS says

24 November 2013 at 11:42 am

Hi,

I’m making a page with quite a few tabs and they go over the page width. How do you handle this elegantly? Here’s my code–(some of the <div>s are empty cause this is a proof of concept for now but they will be filled in eventually).

Thanks a ton in advance!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <!-- This page is copyright Elated Communications Ltd. (www.elated.com) -->

    <title>JavaScript tabs example</title>

    <style type="text/css">
      body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
      ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
      ul#tabs li { display: inline; }
      ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
      ul#tabs li a:hover { background-color: #f1f0ee; }
      ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
      div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
      div.tabContent.hide { display: none; }
    </style>

    <script type="text/javascript">
    //<![CDATA[

    var tabLinks = new Array();
    var contentDivs = new Array();

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems.nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems, 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes.nodeName == tagName ) return element.childNodes;
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

    //]]>
    </script>
  </head>
  <body onload="init()">
    <h1>JavaScript tabs example</h1>

    <ul id="tabs">
      <li><a href="#about">Assgnment</a></li>
      <li><a href="#english">English</a></li>
      <li><a href="#german">German</a></li>
      <li><a href="#danish">Danish</a></li>
      <li><a href="#french">French</a></li>
      <li><a href="#spanish">Spanish</a></li>
      <li><a href="#dutch">Dutch</a></li>
      <li><a href="#italian">Italian</a></li>
      <li><a href="#japanese">Japanese</a></li>
      <li><a href="#korean">Korean</a></li>
      <li><a href="#chinese_simplified">Simplified Chinese</a></li>
      <li><a href="#chinese_traditional">Traditional Chinese</a></li>
      <li><a href="#1">Czech</a></li>
      <li><a href="#2">Finnish</a></li>
      <li><a href="#3">Hungarian</a></li>
      <li><a href="#4">Norwegian</a></li>
      <li><a href="#5">Ukrainian</a></li>
      <li><a href="#6">Vietnamese</a></li>
      <li><a href="#7">Thai</a></li>
      <li><a href="#8">Swedish</a></li>
      <li><a href="#9">Portuguese</a></li>
      <li><a href="#0">Slovenian</a></li>
    </ul>

    <div class="tabContent" id="about">
      <h2>About JavaScript tabs</h2>
      <div>
        <p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
        <p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
      </div>
    </div>

    <div class="tabContent" id="english">
    	<iframe src="https://app.io/7OkyqQ?orientation=portrait&device=iphone5" height="607px" width="291px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
    </div>

    <div class="tabContent" id="german">
    	<iframe src="https://app.io/7OkyqQ?orientation=portrait&device=iphone5" height="607px" width="291px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
    </div>

    <div class="tabContent" id="danish">
    	<iframe src="https://app.io/7OkyqQ?orientation=portrait&device=iphone5" height="607px" width="291px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
    </div>

    <div class="tabContent" id="french">
    	<iframe src="https://app.io/7OkyqQ?orientation=portrait&device=iphone5" height="607px" width="291px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
    </div>

    <div class="tabContent" id="spanish">
    	<iframe src="https://app.io/7OkyqQ?orientation=portrait&device=iphone5" height="607px" width="291px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
    </div>

    <div class="tabContent" id="dutch">
    	<iframe src="https://app.io/7OkyqQ?orientation=portrait&device=iphone5" height="607px" width="291px" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
    </div>

    <div class="tabContent" id="italian">

    </div>

    <div class="tabContent" id="japanese">

    </div>

    <div class="tabContent" id="korean">

    </div>

    <div class="tabContent" id="chinese_simplified">

    </div>

    <div class="tabContent" id="chinese_traditional">

    </div>

    <div class="tabContent" id="1">

    </div>

    <div class="tabContent" id="2">

    </div>

    <div class="tabContent" id="3">

    </div>

    <div class="tabContent" id="4">

    </div>

    <div class="tabContent" id="5">

    </div>

    <div class="tabContent" id="6">

    </div>

    <div class="tabContent" id="7">

    </div>

    <div class="tabContent" id="8">

    </div>

    <div class="tabContent" id="9">

    </div>

    <div class="tabContent" id="0">

    </div>


    
  </body>
</html>

salmanmdz says

5 January 2014 at 10:46 am

I dont now how to move to the next tab
coz i have too many lines i my page so I want to use link or button to go to the next page…

I tried this But It does not work…

<p><a onclick=”return showTab(this)” href=”#tab2″>Go to the next tab</a></p>

If any one know the answer please reply

Reply
chrishirst says

5 January 2014 at 4:05 pm

showTab(this) is simply going to show the same tab as you are clicking on, because the key word ‘this’ is a reference to itself.

Reply
salmanmdz says

5 January 2014 at 8:31 pm

Thanks 4 your reply chrishirst…..

But I want the exact answer How to get it…..

pls someone give me the answer…

[Edited by salmanmdz on 05-Jan-14 20:32]

Reply
chrishirst says

6 January 2014 at 9:17 am

And the remuneration for this contracted work will be??

[Edited by chrishirst on 20-Mar-14 09:39]

Reply
lydias says

19 March 2014 at 12:12 pm

Hi Matt–
thanks so much for this scriptâ€”I looked into a lot of ways of adding tabs and this is was the most flexible. I was able to get them to look exactly as I wanted.

My only problem is getting the page to load with a specific tab open. I’ve updated the script with the mods you mentioned to @mashdot, but it still doesn’t work.

If I paste http://www.ghs.com/events/eelive_2014.html#kiosk
the page still loads with the first tab (#stage)!

I saw in another post that someone else had trouble with this and you suggested other JS running on the page could be conflicting. We have analytics and tracking JS that’s included in the footer–could this be the source of the problem?

Reply
nirajknir says

18 June 2014 at 5:09 am

Can we assign the keyboard shortcuts for that TAB 🙂

Need yours Help on that

-Regard
Niraj

Reply
chrishirst says

18 June 2014 at 7:32 am

http://www.w3schools.com/tags/att_global_accesskey.asp

Reply
nirajknir says

18 June 2014 at 9:07 am

Its Highliting the TAB but it is not able to open the TAB

Reply
chrishirst says

18 June 2014 at 1:19 pm

Use the onFocus event (http://www.w3schools.com/jsref/event_onfocus.asp) to activate the tab then.

Reply
mitz85 says

7 August 2014 at 2:23 am

Hi,

I managed to implement this tabs template successfully on my test website.

However, when trying to implement this on my actual site, the three tabs show at once and don’t seem to hide regardless of clicking on another tab.

Please see link below to understand what I mean…

http://www.on-protein.com.au/index.php/categories/protein-powder-supplements.html#usage

What baffles me is that I’ve used the EXACT same coding in both websites, which are both hosted at the sample place and with the same coding even in the <head>. I’m using magento 1.7 and don’t know what could be wrong.

Any help is appreciated. I’m trained in html but quite new to javascript and css.

Also, if anyone knows, why does the #usage keep appearing at the end of the URL?

Reply
chrishirst says

8 August 2014 at 4:36 am
In that source code I don’t see anywhere that initialises the script, OTHER than a <body> tag that is in the WRONG PLACE
```
    </div>
    </div>
    </div>
</div>
    <body onload="init()">
<ul id="tabs">
```
And is going to do nothing at all.
Reply
Lars Rasmussen says

8 September 2014 at 2:17 am

Hi

I have come across some code which uses this way of making tabs. I works fine, but i have been assigned to make som ajustments on it. When there is nothing to show on a tab then the tab should be non visible.
I have made the showTab() return another class if it is to be non visible. It works fine, but when the user then set something so that the tab should be shown, then it doesnt, though it gets the right css style. I have to reload the whole page to make it work. Is there anyway to make this work so that you can control whether the tab should be shown dynamically

thanks in advance
Lars

Reply
chrishirst says

8 September 2014 at 6:56 am

Javascript has no way of determining if a particular element has or does not have ‘content’.

Reply
mfouwaaz says

8 September 2014 at 8:58 am

Hi Lars

You do have a mechanism for the user to set something for the tab to be shown, even though the tab is invisible at that point, right?

I am thinking of AJAX and using the XMLHttpRequest object to refresh showTab() at that point. If that works then your tab should become visible. There seems to be a little bit of work to it but I think it should work.

Pardon me, I have not tested this but am just shooting my head off. I don’t even have a system here. Obviously you know better on the subject but it maybe worth a try.

Good Luck!

Reply
alastairbrian says

13 January 2015 at 2:51 am

Very helpful tutorial. I have learned many new things from here about CSS and JavaScript. Thanks author.

Reply
bkrish says

5 March 2015 at 10:50 am

This is an awesome script and very helpful to me. I have a question though. How do I enable keyboard navigation to the tab ? i.e, hitting tab will move focus between tabs. I tried using accesskey attribute in href element. But it didnot show the focus on link.
Can someone help me out please?

Reply
Alexio says

5 March 2015 at 11:01 am

Used this several times, Great code.
Now have new twist on this. how would I be able to make a second tab password protected? Meaning need password to be able to view content on tab.

Reply
chrishirst says

5 March 2015 at 3:02 pm

What would be the point??

Anything ‘password protected’ with javascript would require the password to be in the page source code, or require a round trip to the server.

Either that or the whole set up would require recoding using AJAX.

Reply
zeek69 says

17 November 2015 at 3:47 pm

This code is great, the only problem I have is that when the page is displayed, it is only displaying 2 inches of the pages in the tabs with a scroll bar. I can’t see anything in any of the scripting that specifies a page height.

Zeek

Reply
chrishirst says

17 November 2015 at 5:47 pm

Change the tab height value in the style sheet.

Reply
zeek69 says

18 November 2015 at 7:50 am

Chris,

There was no height definition in my CSS. I saw that shochberg had height in his CSS at 60, so I added that to my CSS at 600, but it still is only a couple of inches. Here is the line I added it on.

div.tabContent { border: none; padding: 0.5em; color: #007777; background-color: #f6f6ce; height:600; }

[Edited by zeek69 on 18-Nov-15 07:50]

Reply
chrishirst says

18 November 2015 at 11:12 am

600 what?

To be applied correctly, a height value, along with all other dimensional properties require a valid dimension identifier, (%, px, em, pt etc). A value without that means the browser has to ‘guess’ what you mean.
What they then usually revert to, is the ‘height’ that would nominally be applied to inline level elements, ie; the height of the element content box, the padding and margins are then added to giver the overall ‘box height’, and as you are “including” an iframe with an external page, the ‘content height’ is therefore only made up from the iframe top and bottom margins, padding and border values, because the external document has no width or height that the CSS rendering engine can use.

Reply
remaley says

27 January 2016 at 2:20 pm

This was very helpful, thanks! I’m sort of new to this, could somebody help me apply transitions between tabs when it shows content? Thanks.

Reply
chrishirst says

28 January 2016 at 3:40 am

The purpose of the tutorial is for you to learn how to modify it to suit what you want.

http://forum.jquery.com/topic/how-to-animate-content-between-tabs

Don’t forget to come back and add your solution to this thread.

Reply
camdaw says

4 February 2016 at 11:26 pm

I seem to be having an issue with the script. I am new to web design and I can’t identify the issue. I have copied the CSS portions as provided and have expanded the HTML portions so that I have six tabs. As soon as I go past six something happens so that the content for each tab is displayed on all of the tabs. Any suggestions?

Reply
chrishirst says

5 February 2016 at 8:56 am

” Any suggestions?”

None whatsoever.

Before anyone can offer the remotest possibility of useful ‘suggestions’ we need to SEE the problem!

Reply

camdaw says

8 February 2016 at 9:45 pm

Lesson learned. I found out what was wrong with my last question. I have several more questions.

First, when I resize my browser the ul elements get out of whack and no longer line up with the tabcontent elements. As you can see I have used vw to make the text size relative to the viewport, but I am not sure how or if can use it for margins and padding.

Second, I would like to make it so my tabs line up with the edges of the tabcontent elements. Meaning, if I have six tabs, I would like the left edge of the first tab to line up with the left edge of its associated tabcontent, and for the right edge of the last tab to line up with right edge of its associated tabcontent (all while making sure the interior tabs are all equally spaced).

Thanks!

ul#tabs { 
	list-style-type: none; 
	margin: 20px 40px 0 40px; 
	padding: 0 0 0.3em 0;
	margin: 30px 0 0 0; 
	}
      ul#tabs li { 
	display: inline; 
	}
      ul#tabs li a { 
	color: red; 
	font-family: 'top_secretbold'; 
	font-size: 135%; 
	font-size: 1.35vw; 
	font-weight: bold; 
	background-color: #ffeecc; 
	border: 1px solid; 
	border-color: #696969; 
	padding: 1vw 1vw .2vw 1vw; 
	text-decoration: none; 
	}
      ul#tabs li a:hover { 
	background-color: #ffe5b3; 
	}
      ul#tabs li a.selected { 
	color: #red; 
	background-color: #ffe5b3; 
	border-bottom: none; 
	font-weight: bold; 
	padding: 0.7em 0.3em 0.2em 0.3em; 
	}
      div.tabContent { 
	font-family: 'Courier New', Courier, monospace; 
	font-weight:bold; 
	font-size: 135%; 
	font-size: 1vw; 
	border: 1px solid #696969; 
	margin: 0 40px 0 40px; 
	padding: 0.5em; 
	background-color: #ffe5b3; }
      div.tabContent.hide { 
	display: none; 
	}
      h1    {
	font-family: 'Courier New', Courier, monospace; 
	color:red; 
	text-align: center; 
	font-size: 700%; 
	font-size: 7vw; 
	font-weight: bold;
	}
     h2    {
	font-family:'Courier New', Courier, monospace; 
	color:red; 
	text-align: center; 
	font-size: 150%; 
	font-size: 1.5vw;
	}
     a     {
	font-family: 'Courier New', Courier, monospace
	}
     hr    {
	border-color: #696969;
	}

chrishirst says

8 February 2016 at 11:51 pm

Give us a clue and we will try to help.

Reply
camdaw says

9 February 2016 at 5:02 pm

What exactly are you looking for by way of clue?

Reply
chrishirst says

10 February 2016 at 9:49 am

As I said in the previous post … … We need to actually see the problem.

Just the CSS rules are of no use to recreate your problem.

EVERYTHING is required, the CSS, The HTML it is applied to and any images used as structural or decorative elements.

As I keep saying to many people who post THEIR problems with Elated tutorials, we need to see YOUR code preferably as a URL so we can view and test ‘in situ’

Reply
nnkuba says

23 April 2016 at 7:23 am

Matt, thanks for the tabbed page tutorial.

I would like to go a little further. Suppose I have a form even on the same page, and when I submit, I would like to return to the same tab. How could that be archived?

Reply
chrishirst says

25 April 2016 at 12:55 pm

See my reply following mashdot’s question dated 08-Sep-09 17:35

Reply
tmkramer says

15 September 2016 at 11:05 am

for camdaw:

Your fixes to the font size helped me a LOT! I am not a coder, just google and play around till it works.

So I am only having one issue now that I’m hoping someone can hjelp me with, and remember, I really have no clue what I’m doing so you may need to give em more details than you think you need to.

So, my text is shrinking and expanding beautifully based on the page size. LOVE IT! BUT, I have images embedded as well that ARE NOT changing size.

How do I fix them? This is how they are currently in my code, so the top part is the label for the image it is shrinking and expanding based on page size, but the image (with link to a document) that I had centered below it using the   is not changing:

         &nbsp3rd QTR FY16 DeCA
<br />

  &nbsp    &nbsp<a href=”#” onClick=”MyWindow=window.open(‘https://www.milsuite.mil/book/docs/DOC-306188’); return false;”><img src=”https://www.milsuite.mil/book/resources/statics/1737745/DeCA3rdQtrFY16DashboardThumbnail.jpg?a=1472744998785″></a>

THANKS!

[Edited by tmkramer on 15-Sep-16 11:30]

Reply
chrishirst says

15 September 2016 at 6:55 pm

first of all … Do NOT ‘centre’ things using non-breaking spaces, as it is just ‘guesswork’ use the appropriate properties.

And for images:

http://www.w3schools.com/css/css_rwd_images.asp

Reply
tmkramer says

21 September 2016 at 2:53 pm

Is there an alternative to divs in the tabbed content?

I’d like to add something like this:
<div id=”follow” style=”float: right; width: 48%; margin-top: 40px; padding: 0 0 4px 11px; border-left: 1px solid #ccc;”>
to divide sections of the page and then float left and right.

When you add this to the content it creates a divide and moves everything below to the next tab. I’m attempting this on the last tab of my page, but it still breaks away from the content.

Reply
chrishirst says

26 September 2016 at 6:00 am

“it creates a divide” Yep that’s why they are called ‘div’, shorthand for ‘division’ (or ‘divider’)

You can use whatever element you prefer or need.

But first, … Learn the difference between block level and inline level elements, how to use the ‘display’ property and floating/clearing elements.

https://www.w3.org/TR/CSS2/visuren.html

Plus how to use positioning to overlay/overlap elements, in the same X-Y space.

[Edited by chrishirst on 26-Sep-16 06:01]

Reply
emoreau says

18 October 2016 at 8:25 am

Somebody has an example of multiple section with tabs on the same page? I just cannot seem to get it!

ie:
some text
tab1 tab2 tab3
other text
tab4 tab5
yet other text

Reply
ianhaney says

30 April 2017 at 1:14 pm

Hi

I am using the script in a website I am building and am just wondering how do I put a link to the tabbed content in my nav menu in my includes/header.php so when a user clicks on a link in the nav menu, it opens the tab content on the php page I have the tabs and it’s content on, the url is https://www.broadwaymediadesigns.co.uk/sites/kmsurveys/home-condition-surveys.php

The links are in the dropdown of the main heading Surveys

Thank you in advance

Reply
chrishirst says

30 April 2017 at 2:55 pm

” it opens the tab content on the php page I have the tabs and it’s content on, the url is ”

READ the whole thread … There at least three posts explaining this.

Reply
ianhaney says

1 May 2017 at 4:28 am

See post at http://www.elated.com/forums/topic/6299/

[Edited by chrishirst on 02-May-17 12:22]

Reply
anhr says

2 July 2017 at 8:02 am

I took the ideas from this article and wrote my own code. Please see my cross-browser JavaScript code: https://github.com/anhr/Tabs.

You can use different ways to create tabs and tab content.

Tab content can added only when tab gets focus.

You can remember selected tab. Selected tab opens immediatelly after opening of the page.

You can create tabs inside tab.

Custom background of the tab is available.

Example: http://anhr.ucoz.net/Tabs/

Reply

Creating the HTML for the tabbed page

Creating the CSS

Creating the JavaScript code

The init() function

The showTab() function

The getFirstChildWithTagName() function

The getHash() function

Putting it together

Reader Interactions

Comments

Leave a Reply Cancel reply

Footer

Contact Matt

Follow Matt

The `init()` function

The `showTab()` function

The `getFirstChildWithTagName()` function

The `getHash()` function