For some reason modern designers and developers love to use tabs. Maybe they keep things organize and clean all in one page. Here's a incredibly simple cross browser compatible Javasript tabs script. The final result will look like the one below.
Javascript
Include this script either as a separate file or in between the head tags.
//Tab Selected
function show_content(id) {
//Hide Content
hide_content();
//Change Tab
change_tab(id);
//Strip Id
var new_id = id.replace('tab_', "");
document.getElementById(new_id).style.display = "block";
}
function hide_content() {
//Hide Others
var content_div = document.getElementById('content_area');
var content_inner = content_div.getElementsByTagName('DIV');
var other_div = content_inner.length;
for (var i=0;i < other_div; i++) {
content_inner[i].style.display = "none";
}
}
function change_tab(id) {
//Change Others
var tab_div = document.getElementById('tab_bar');
var tab_inner = tab_div.getElementsByTagName('DIV');
var other_tab = tab_inner.length;
for (var i=0; i < other_tab; i++) {
tab_inner[i].className = "tab_button";
}
//Last Tab Change
document.getElementById(id).className = "tab_button tab_button_sel";
}
</script>
CSS
This is your CSS code that needs to also go between the HEAD tags or you can have a separate file once again.
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tab_area {
width: 480px;
}
.tab_bar {
border: 1px solid #333;
border-left: none;
border-bottom: none;
float: left;
clear: left;
}
.tab_button {
border-left: 1px solid #333;
background: #E8E8E8;
padding: 6px;
float: left;
display: inline;
cursor: pointer;
}
.tab_button_sel {
background: none;
}
.tab_button:hover {
background: #CCC;
}
.content_area {
padding: 6px;
width: 100%;
float: left;
border: 1px solid #333;
}
.tab_content {
display: none;
}
</style>
HTML
This is your HTML code for the tabs, obviously you can customize this all you want to fit your content.
<div class="tab_bar" id="tab_bar">
<div class="tab_button" id="tab_one" onclick="show_content(this.id);">Tab One</div>
<div class="tab_button" id="tab_two" onclick="show_content(this.id);">Tab Two</div>
<div class="tab_button" id="tab_three" onclick="show_content(this.id);">Tab Three</div>
</div>
<div class="content_area" id="content_area">
<div class="tab_content" id="one">Content Area One</div>
<div class="tab_content" id="two">Content Area Two</div>
<div class="tab_content" id="three">Content Area Three</div>
</div>
</div>
The final tweak, lastly to ensure a default tab is selected from the beginning change your opening BODY tag to the following.
Adding Tabs and Content
Ensure that you add the same amount of tabs as content or else there won't be enough tabs per content or vice-versa.
Adding Tabs
To add tabs just keep copying and pasting the following lines. Ensure the number of the id counts in order from 1, 2, 3… etc. You must have tab_ in front of the number.
<div class="tab_button" id="tab_two" onclick="show_content(this.id);">Tab Two</div>
<div class="tab_button" id="tab_three" onclick="show_content(this.id);">Tab Three</div>
Adding Contents
Same thing with the content just keep on duplicating and name the id in sequence in terms of numbers.
<div class="tab_content" id="two">Content Area Two</div>
<div class="tab_content" id="three">Content Area Three</div>
If you have any questions or trouble with this script just let me know.
Share It
