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

OneTwoThreeFourFive




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.