Tabbed Javascript Content Box
You want a simple javascript tabbed box? Well here you go...
In order to get this one working you will need to grab a copy of JQuery available here:
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js
If the above link is broken try http://jquery.com/ and search around a bit. Wherever you may find the script, just save this to a local directory or to your host's server and remember where you put it -- you'll need to link back to it shortly.
First, we create the javascript to call to our copy of jquery (I told you it would be done shorty, didn't I?). Assuming you put it under the root directory in a folder named "scripts" your code would look like this:
<script type="text/javascript" src="/scripts/jquery.js"></script>
Now we build the HTML for our tabbed box:
<div class="tabbed-box">
<ul class="tabs">
<li id="tab1"><a href="#">Coding Forums</a></li>
<li id="tab2"><a href="#">Baby in Progress</a></li>
<li id="tab3"><a href="#">Junk</a></li>
<li id="tab4"><a href="#">Traffic</a></li>
<li id="tab5"><a href="#">Potatoes</a></li>
</ul>
<div class="tabbed-content">
<p>Here's my content for tab 1<br /><img src="/images/coding_forums_logo4.png" alt="" /><br /> It includes a logo for CodingForums.com, which is nice.</p>
</div>
<div class="tabbed-content">
<p>Here's my content for tab 2<br /><img src="/images/purpose4.png" alt="" /><br /> This image is a bit different, which is also nice. In fact, I'd say it's much better!</p>
<p>I am also adding a load of filler content just to show you how the overflow will be handled if your content becomes longer than the height of this box will allow. Seriously. Like, a lot longer:</p>
<p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.</p>
<p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.</p>
<p>See? Now that was substantially longer than we could fit into the standard box but it's OK. Our box will plop a scroll bar into itself to handle the extra load. There's no sacrifice to the rest of the page desgin!</p>
</div>
<div class="tabbed-content">
<p>Here's my content for tab 3<br /><img src="/images/webs_logo2.png" alt="" /><br />If you've ever used their service then you can probably guess why I have named the tab as I have...</p>
</div>
<div class="tabbed-content">
<p>Here's my content for tab 4<br /><img src="http://cmhimg01.dot.state.oh.us/images/artimis/CCTV015.jpg" alt="" style="width:250px;" /><br />This is what I have to drive home in quite often...</p>
</div>
<div class="tabbed-content">
<p>Here's my content for tab 5<br /><img src="/images/potatoes.jpg" alt="" /><br />I feel as though this page speaks for itself.</p>
</div>
</div>
Next, we create the remaining javascript to hide/show our tab content and change the color of the active tab in the menu... all using jquery!This is what it looks like:
<script type="text/javascript">
var currentTab = 0; // Set to a different number to start on a different tab.
function openTab(clickedTab) {
var thisTab = $(".tabbed-box .tabs a").index(clickedTab);
$(".tabbed-box .tabs li a").removeClass("active");
$(".tabbed-box .tabs li a:eq("+thisTab+")").addClass("active");
$(".tabbed-box .tabbed-content").hide();
$(".tabbed-box .tabbed-content:eq("+thisTab+")").show();
currentTab = thisTab;
}
$(document).ready(function() {
$(".tabs li:eq(0) a").css("border-left", "none");
$(".tabbed-box .tabs li a").click(function() {
openTab($(this)); return false;
});
$(".tabbed-box .tabs li a:eq("+currentTab+")").click()
});
</script>
Now comes the fun part - the styling. With all of this fancy control we might as well make it visually apparent to the user which tab they are viewing. While we're at it we'll give each tab its own color for good measure to help users build a sense of where they are and where they need to put their mouse. Repitition and big obvious signs always help a new user adapt to regular use of your site...
<style type="text/css">
.tabbed-box { width:504px;font-size: 12px;margin: 3em auto;font-family: Arial, Helvetica, sans-serif;background: #fff url(tabbed-body-bg.jpg) repeat-x bottom;border: 1px solid #ddd; }
.tabbed-box .tabs li { list-style: none;float: left; }
.tabbed-box .tabs li a {
display: block;
width: 100px;
padding: 5px 0;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #888;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.tabbed-box ul {margin:0;padding:0;}
.tabbed-box .tabs li:first-child a { border-left: none; }
.tabbed-box .tabs li a:hover { color: #333; }
.tabbed-box .tabs li a:focus { outline: none; }
.tabbed-box .tabs li a.active { background: #ded/*#fff*/;color: #333;/*border-bottom: 1px solid #fff;*/ }
.tabbed-content { padding: 3em 1em 1em 1em;display: none;height:250px;overflow:auto;clear:both;background-color:#ded; }
#tab1 {background-color:#ace;}
#tab2 {background-color:#ade;}
#tab3 {background-color:#abe;}
#tab4 {background-color:#add;}
#tab5 {background-color:#def;}
</style>
Put this all together and we have the working example below:
Here's my content for tab 1
It includes a logo for CodingForums.com, which is nice.
Here's my content for tab 2
This image is a bit different, which is also nice. In fact, I'd say it's much better!
I am also adding a load of filler content just to show you how the overflow will be handled if your content becomes longer than the height of this box will allow. Seriously. Like, a lot longer:
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
See? Now that was substantially longer than we could fit into the standard box but it's OK. Our box will plop a scroll bar into itself to handle the extra load. There's no sacrifice to the rest of the page desgin!
Here's my content for tab 3
If you've ever used their service then you can probably guess why I have named the tab as I have...
Here's my content for tab 4
This is what I have to drive home in quite often...
Here's my content for tab 5
I feel as though this page speaks for itself.
