Create a simple mootools 1.2 tab system

Question

Hi all, I'm trying to create a very simple tab interface using the mootools 1.2 version. I need to have a fadein-fadeout effect, no sliding or morphing. I've tried to find some demos online but they all refer to different versions of mootools or they are too complicated comparing to my needs. Can you please give me some guidelines?

This is an image of what I'm trying to do and a sample code.

<ul id="buttons">
     <li><a href="#">button 1</a></li>
     <li><a href="#">button 2</a></li>
     <li><a href="#">button 3</a></li>
     <li><a href="#">button 4</a></li>
</ul>

<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>

• I need all tabs to be hidden when page loads.
• each time user clicks a button, the div/tab it's referring to should fade in.

Answer 1

Not exactly a perfect piece of code but should do the job:

window.addEvent('domready',function(){

var tabs = $$('div[id^="tab"]');
tabs.fade('hide');

$$('#buttons li').each(function(element,index){
    element.addEvent('click',function(){
        tabs.fade(0);
        tabs[index].fade(1);
    });
});

})​;​

Answer 2

You can also search mootools forge and see if any of the readymade tab implementations suit your needs:

Mootools Forge tab implementations