Guide: Javascript Tabs

AlisonRobin's picture

For Loops For Life


For a while I dwelled on how to make my own kind of Javascript tabs since there was no guide for the JS tabs that a lot of people were using and there were people who wanted to be able to use tabs so it seemed logical that someone type it all out. A while after I made this, Unplugged made a guide to Hraeth's tab system. For loops use less text space than Hraeth's in your little brown edit box, but is less transparent to understand if you are brand new to HTML, CSS, and JS. If you value using as few letters as possible like me, this is your way to go. If you are brand new to this stuff, start with Hraeth's easy-to-understand JS. They both work the same!

You can use this anywhere for whatever, credit never necessary. Have fun and don't be afraid to ask questions if I am ever unclear with anything or if you have a specific issue, but I'm still learning myself. I want everyone to be able to make the kinds of pages they want to make.

It's possible I may update the code or page from time to time if there is an error or if there is something new I want to add. I hope my trackers won't mind too much.


Show One / Show Two / Show Three / Show Four / Show Five



<a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('one').style.display='inline';">Show One</a> / <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('two').style.display='inline';">Show Two</a> / <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('three').style.display='inline';">Show Three</a> / <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('four').style.display='inline';">Show Four</a> / <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('five').style.display='inline';">Show Five</a>

<span id="one" class="tab" style="display:inline;">One</span><span id="two" class="tab" style="display:none;">Two</span><span id="three"class="tab" style="display:none;">Three</span><span id="four"class="tab" style="display:none;">Four</span><span id="five"class="tab" style="display:none;">Five</span>


This code works in a very simple way:
When clicked, go through every element with the class "tab" and set display to "none".
Then get the one element with the id desired and set its display to "inline".
Because it uses a for loop to first make sure that all of the other tabs are hidden instead of naming them individually, it saves a significant amount of space in the editor.


Copy and paste onto your page! If you have specific questions never be afraid to ask!

Currently it switches between spans instead of divs. If you want divs, change all instances of "span" to "div" and all instances of "inline" to "block." Switch around style tags however you please. You can also change the IDs freely and add new tabs as long as the IDs match up and the place in the code where it says (ii=0;ii<5;ii++) the 5 must be changed to the total number of tabs that you have. You can have multiple sets of tabs on your page, so long as each set of tabs uses a different class.

I changed the variable i (which is the traditional variable for for loops) to ii because the BBCode parser on the site would interpret the variable as BBCode for an italic open tag when there was an open italic tag somewhere else on the page and it would ruin everything. As a rule of thumb I suggest using <em> tags instead, but it doesn't matter because now the code won't get fussy about the italics.


Just googling "javascript tabs" gives a hundred good results! Most are waay too complex for me.
In the end the W3Schools page listing methods for finding HTML elements (explains getElementById and getElementsbyClassName), the W3Schools page on for loops, and the question and answers in this StackOverflow page.
MageOfMind's picture

I'm already tested it -

I'm already tested it - that's great.
Effect is better then with css.
Thank you for sharing ^^
Mis's picture

Oh! Handy! Thanks for

Oh! Handy! Thanks for sharing, going to play around with this! The links at the bottom are indeed very practical, they've always helped me a lot too Smiling
Unplugged's picture

Sweet stuff. Thanks a lot

Sweet stuff. Thanks a lot once again Alison. You're really great with this!!

The original thread which had the JS code got deleted, yeah. So this is super handy to have.
AlisonRobin's picture

@Mage I'm glad it's working

@Mage I'm glad it's working well for you! I definitely prefer Javascript tabs to CSS tabs myself. EDIT: Saw your page, works great!

@Mis Have fun playing with them! And yep, W3Schools has been instrumental in my learning... it's a super helpful site.

@Unplugged I am still a baby newbie with Javascript. But I'm having fun. I was gonna link to the thread with Hraeth's code so people could compare and contrast and use what they wanted but oh well.

EDIT: Tweaked code slightly. No change in performance (it still works fine) but I simplified it and shortened it.
.Ru.'s picture

Thank you for this free code,

Thank you for this free code, and that it works while looking great, too is amazing!

"If your eyes could speak, what would they say?" -Max

Profile art by me
AlisonRobin's picture

No prob.

No prob. Smiling


Waning-Sun's picture

Making note of this.

Making note of this.
Avatar by Meadow. Siggy © Shey & Squeegie
MageOfMind's picture

Is there any way to make the

Is there any way to make the first tab blank?
I mean to make boxes with content appear only after first click on one of the links.
Can't get it with my own mind T_T

Thought for a while and understood, lol x))
TheDaninator's picture

this is a nice code. May I

this is a nice code. May I use it.. It it fine by you?
I remember W3Schools has helped me with transparency code when I was a newbie here.. .

AlisonRobin's picture

Yes, you can use it however

Yes, you can use it however you want anywhere you want, it doesn't matter to me. Smiling
TheDaninator's picture

Thanks a bunch!

Thanks a bunch!
Unplugged's picture

There's a funny side effect I

There's a funny side effect I stumbled across while using this code. When using this JS Tab Code, you cannot use the regular [i] [/i] BBCode italics because it'll break the tabs. Since the code has [i] as part of its code, once you use [i] [/i] in the blog, the [i] in the Tab Code is also interpreted as "italics" and transformed "into" BBCode, which breaks the tabs.
AlisonRobin's picture

Yeah, I've had that happen

Yeah, I've had that happen once before too. I think it only happens with an uneven amount of itallics tags (ie if they're done wrong) but I haven't experimented extensively. The BBCode parser goes through and pulls out the BBCode before it processes HTML (because the BBCode alters the HTML) so it makes stuff fussy.

I may change the variable because of that, but I've been lazy mainly because i is the standard variable for for loops and I didn't want to throw people off who are looking at it. But, any variable would work, including "ii" which has been my fix until now and what I'll switch it to when I'm more awake and less worried about screwing up everything.

My other fixes would be to use em tags in the HTML or host the JS externally, but I'm not gonna make other people do that work.