Nice AJAX Tabs Script Tutorial
Update 11/16/07: I realized I had a few typos in some of the code, below. If you’ve been having trouble getting this working, re-copy the code that links your HTML document to the scripts. It should be working now.
I’ve always been a fan of tabs. I think they are not only useful at clearing up clutter, but they can be down right sexy if they’re done right. A while ago I can across Nyokiglitter’s website where she throws up some of her examples of scripts using MooFX. That’s where I found this next script for this tutorial. This script provides a tabs unit that uses a nice sliding effect when changing tabs. It is based on the MooFX coding framework. All necessary script files are included in the .zip file.
Please keep in mind that I did not write the script or code for this, I merely am writing a tutorial on how to install it on your own website. Nyokiglitter didn’t provide a license for this, but I emailed her and hope to hear back soon. Also, the tutorial below is fairly involved. But if you follow the steps it should be fairly easy.
Tab Accordion
Tutorial presented by Simply-Basic.com
Coded by Nyokiglitter
URL: http://www.nyokiglitter.com/tutorials/tabs.html
Download: Please visit the above link and click on tabAccordian.zip
The Basics
Installation
Begin by downloading tabAccordion.zip from here. In this zip file you will notice a few files: an “images” folder with a single image; a “scripts” folder with three javascript (.js) files; and an HTML file called tabbed.html.
First, lets prepare our style sheet. The example tabbed.html includes the CSS styling in the <head></head> portion of the HTML page. This seems too cluttered for my taste. Below I’ve pasted the CSS for you. Copy this and paste it either into your pre-existing CSS file, or create a new one called tabs.css. Doing it either way is fine.
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | body{ color: #333; font-size: 11px; font-family: verdana; } a{ color: #fff; text-decoration: none; } a:hover{ color: #DFE44F; } p{ margin: 0; padding: 5px; line-height: 1.5em; text-align: justify; border: 1px solid #73A405; } #wrapper{ width: 500px; margin: 0 auto; } .box{ background: #fff; } .boxholder{ clear: both; padding: 5px; background: #8DC70A; } .tab{ float: left; height: 32px; width: 102px; margin: 0 1px 0 0; text-align: center; background: #8DC70A url(</code><strong>http://YourDomain.com/Tabs/images/greentab.jpg</strong><code>) no-repeat; } .tabtxt{ margin: 0; color: #fff; font-size: 12px; font-weight: bold; padding: 9px 0 0 0; } |
Important, if you scroll to the bottom of the above CSS code, I bolded one line: http://YourDomain.com/Tabs/images/greentab.jpg. After you upload the tab files included in the .zip to your server (as I explain in the next step), you need to change this bolded text to the actual location of the included image on your server.
Upload Your Files
The next step is to upload the files to your webserver. I recommend creating a new folder on your server called “Tabs”, or whatever name you like. This will merely help with organization. Upload all the files in the downloaded .zip file except tabbed.html. This file is merely an example and is not needed on your actual server. If you created a new file called tabs.css in the step above, upload it to the same location as the rest of these files. If you edited your pre-existing CSS template, all you have to do is ensure an updated version now resides on your server.
Next, link your HTML file to your javascript and possibly new CSS file using the following commands. These lines of code are to be inserted in between your <head></head> tags.
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script type="text/javascript" src=</code><strong>"http://YourDomain.com/Tabs/scripts/prototype.lite.js"</strong><code></script> <script type="text/javascript" src=</code><strong>"http://YourDomain.com/Tabs/scripts/moo.fx.pack.js"</strong><code></script> <script type="text/javascript" src=</code><strong>"http://YourDomain.com/Tabs/scripts/moo.fx.js"</strong><code></script> <script type="text/javascript"> function init(){ var stretchers = document.getElementsByClassName('box'); var toggles = document.getElementsByClassName('tab'); var myAccordion = new fx.Accordion( toggles, stretchers, {opacity: false, height: true, duration: 600} ); //hash functions var found = false; toggles.each(function(h3, i){ var div = Element.find(h3, 'nextSibling'); if (window.location.href.indexOf(h3.title) > 0) { myAccordion.showThisHideOpen(div); found = true; } }); if (!found) myAccordion.showThisHideOpen(stretchers[0]); } </script> |
If you created a new CSS file called tabs.css, make sure you also include the following line of code in the same location as the above lines.
Code:
1 | <link href="</code><strong>http://YourDomain.com/Tabs/tabs.css</strong>"<code> rel="stylesheet" type="text/css" /> |
In the above examples, replace the bolded URLs with the actual location of each file on your server.
Coding Your Tabs
Now we are reading to actually set up the tabs code in your HTML page. The tabs unit really only holds four tabs as it is now, though I suppose you could tweak your CSS code to include more tabs if you wish.
Where you wish your tab unit to be displayed, paste the following code:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div id="wrapper"> <div id="content"> <h3 class="tab" title="first"><div class="tabtxt"><a href="#">first</a></div></h3> <div class="tab"><h3 class="tabtxt" title="second"><a href="#">second</a></h3></div> <div class="tab"><h3 class="tabtxt" title="third"><a href="#">third</a></h3></div> <div class="tab"><h3 class="tabtxt" title="fourth"><a href="#">fourth</a></h3></div> <div class="boxholder"> <div class="box"> <p>Text for tab 1</p> </div> <div class="box"> <p>Text for tab 2</p> </div> <div class="box"> <p>Text for tab 3</p> </div> <div class="box"> <p>Text for tab 4</p> </div> <script type="text/javascript"> Element.cleanWhitespace('content'); init(); </script> |
The above code is fairly self-explanatory. You will notice that on lines 3-6 there is code similar to the following: <a href="#">first</a>. Simply replace first (or whatever text is there) with the title you desire for that tab. And obviously, replace the “Text for tab…” with whatever text or code you will be placing in that tab.
Phew, and that’s it. You’ve got your tab unit installed! Still hungry for more? I found a few tweaks and tips for the tab unit that came in handy for me. They are optional, so if you aren’t interested, you’re done!
Tweaking Your Tabs
First, you have absolute control over your tab unit’s layout via the CSS coding. I’ll give you a few tricks here, but if you aren’t familiar with CSS some simple Googling can reveal some secrets. But, here are a few I found especially useful.
Changing the Background
To change the background of your tabs unit, simply find .box{ in your CSS document and change background:#fff; to either another color code or to a url like this: background: url(http://www.YourDomainHere.image.jpg);.
Creating Columns in Your Tabs
To create two columns in your tab unit, simply add the following code to your CSS document:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .columnL { float: left; width: 48%; padding-left: 2px; } .columnR { float: right; width: 48%; border-left: 6px dashed #8dc70A; }</code></div> <p>Then, where you want your columns, simply have it look similar to the following:</p> <div class="code"><code><div class="box"> <div class="columnL"> <p>Left Column Text Here</p> </div> <div class="columnR"> <p>Right Column Text Here</p> </div> </div> |
Conclusion
So that is the Tabs Accordion script. There are many more tweakings that you can do, but I’ll let you figure them out. Those are just some that I thought would come in handy. Hopefully I didn’t forget anything, if you think I did, or if you just run into problems implementing this script, feel free to leave a comment and I’ll see if I can help you. If you have an actual coding problem, head over to the script author’s page here.
Useful Articles
This article was written by John Kolbert on October 29, 2007 and filed as Tutorial/How-To, Useful Tools. Get the latest articles by subscribing to the RSS feed. This article, including images and attachments, is property of John Kolbert and is not to be republished or translated without prior written permission.
I’ve looked at this thing before as well - but I wasn’t sure if the extra call to prototype and moofx would slow down a site? Is the file downloaded always or just the part of it that is needed?
Matt Ellsworth’s last blog post..I?m attending the Ross Goldberg?s Masters Internet Marketing Seminar Are You?
@Matt From my understanding, when the page is loaded it loads the entire scripts as well. I don’t believe it has the capabilities of only loading specific portions. There are some ways of compressing scripts to make them load faster (minimization, etc). You could also condense these into one file, I would assume, and that may help as well.
I only actually used this script on a test page to create the tutorial, but unless you are using a lot of other script calls as well I wouldn’t think this would create too much lag. Good questions!
i’m mike.
thank you for your tutorial.
how do I use more tab boxes in 1 page?
an is it possible to change the color (background of the link from green) of the active box in white ?
I have seen if I put 2 boxes in 1 page 1 box is closed, how can I do to be both open