Quick and Easy Super-Customizable Tabbed Content in JavaScript and CSS

Requirements: HTML (basic understanding), JavaScript (basic understanding), CSS (basic understanding)

Updated April 08, 2013: New method, less dirty, easier to add tabs!

As a web designer, I’ve found many uses for tabbed content. However, all the online tutorials are all referencing external JavaScript files, or images, or you can’€™t play around with the layout without screwing up your entire page layout, or ARRRRGH I hate them!

So I devised an incredibly simple and versatile method to build a simple tabbed layout. You can customize it in any way you want, add or remove pages, change sizes, do whatever you want with it! You can make your “buttons”€ go anywhere on the page, same as your content.

Here’s the demo, if you want to see what it looks like.

There’€™s three parts to this method: the JavaScript, the CSS, and the HTML. Let’€™s go step by step.


Step One: Setting up the basic CSS

The CSS for this is incredibly basic:

Insert the following between your <head> and </head> tags, or into your stylesheet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
.tabctnt{
width:810px;
height:300px;
color:#000000;
background-color:#ffffff;
visibility:hidden;
position: absolute;
border:1px solid #cccccc;
}

.tabbtn {
width: 150px;
margin-bottom:10px;
padding:2px;
color:#000000;
background-color:#cccccc;
display:inline-block;
}
</style>

As you can see, you can style the tab buttons with .tabbtn and style the tab content boxes with .tabctnt! It’s easy!

 


Step Two: Setting up the JavaScript

Insert the following code in between your <head> and </head> tags, or in an external .js file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
var stcolour = "#cccccc"; /* Selected tab background colour */
var utcolour = "#ffffff"; /* Unselected tab background colour */

function load() {
    for (var i=0; i<document.getElementsByClassName("tabctnt").length; i++) {
        var newHTML;
        newHTML = document.getElementById("buttons").innerHTML + "<div class='tabbtn' onClick='tabswitch(" + (i+1) + ")'>Tab " + (i+1) + "</div>";
        document.getElementById("buttons").innerHTML = newHTML;
    }
    tabswitch(1);
}

function tabswitch(num) {
    var n = (num - 1);
    for (var i=0; i<document.getElementsByClassName("tabctnt").length; i++) {
        document.getElementsByClassName("tabctnt").item(i).style.visibility = "collapse";
        document.getElementsByClassName("tabbtn").item(i).style.backgroundColor=utcolour;
    }
    document.getElementsByClassName("tabctnt").item(n).style.visibility = "visible";
    document.getElementsByClassName("tabbtn").item(n).style.backgroundColor=stcolour;
}
}
</script>

You can change the colors around to suit your design in the first two variables, stcolour and utcolour.

 


Step Three: The HTML itself!

The HTML is also very basic. Enter this where you want your buttons.

1
2
3
<div id="buttons">

</div>

Then, place this where you want your tabcontent to go:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="content">
<div class="tabctnt">
Tab 1
</div>

<div class="tabctnt">
Tab 2
</div>

<div class="tabctnt">
Tab 3
</div>

</div>

Step Four: Customisation

Adding another tab:

To add another tab, simply add another div where the tabs are, like so:

1
2
3
<div class="tabctnt">
Tab 4
</div>

 

Making it look pretty:

To change the colours, edit the CSS properties of .tabctnt and .tabbtns, as well as the stcolour and utcolour parameters in the JavaScript. It’s pretty straight forward, and can be customized to nearly anything.

If you want to apply different styles to each of tab contents, nest a new div inside your tab page’s .tabctnt div which you style seperately.

 

So that’s it! It’s extremely simple, and it gets the job done properly without screwing with your layout or requiring external files!

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • Reddit
  • StumbleUpon
  • Digg
  • Email
  • RSS

March 15, 2012 at 4:50 pm | Posted in: Tutorials, Web Design | 2 comments

2 responses to “Quick and Easy Super-Customizable Tabbed Content in JavaScript and CSS”

  1. anonamuseio says:

    This would easily work in a mobile template for xenforo right? The worry is screwing up te page for a phone. The template supports all devices so would this destroy the setup?

    • bigtree says:

      It should work. I tried with a few mobile devices and had no problem. Just as long as they support javascript.

Leave a Reply

Your email address will not be published. Required fields are marked *