Create a simple mootools 1.2 tab system -

I am trying to create a very simple tab interface using mootools 1.2 version. I should not have the Fidgin-Fadeout effect, no sliding or morphing. I have tried to find some demos online, but these are all in reference to different versions or they are very complex compared to my needs. Can you give me some guidelines?

This is an image that I am trying to do and a sample code.

  & lt; Ul id = "button" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Button 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Button 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Button 3 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Button 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "tab1" & gt; Content for button 1 & lt; / Div & gt; & Lt; Div id = "tab2" & gt; Content for button 2 & lt; / Div & gt; & Lt; Div id = "tab3" & gt; Content for button 3 & lt; / Div & gt; & Lt; Div id = "tab4" & gt; Content for Button 4 & lt; / Div & gt;  

• I need all the tabs to hide when the page is loaded.
• Every time a user clicks on a button, that device /

Not exactly the piece of code but it should work:

$ {('hidden'); $ {('' '' '' '' Each function (element, index) {element.addEvent ('click', function) {tabs.fade (0); tab [index] .fade (1);}) ;}); });