StandupWeb Ticker with mootools 1.2

SwQuickTab

INTRODUCTION

Simple Mootools implementation of the tab functionality. I put the tab in the nav section, but you can change it and put the tabs wherever you want (like on top of the content if you want)

FEEDBACK: Comment on post or sign up and go to the forum section: click here

EXAMPLE

First tab title

FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content FirstTab content

Second tab title

SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content SecondTab content

Third tab title

ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content ThirdTab content

Forth tab title

ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content ForthTab content

Fifth tab title

FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content FifthTab content

Sixth tab title

SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content SixthTab content

STEP BY STEP

1- The menu:

- Create an element with id 'tabbedmenu':

-> we use here an <ul> but it could be any kind of element. For each children of this element that you want to be part of the quicktab menu:

- add the class 'details'
- add the id 'pageX' where X is a number
- set href='#'

2- The content:

- Create an element with id 'tabbedcontent'

-> we use here a <div> but it could be any kind of element. For each children of this element that you want to be part of the quicktab content:

- add the class 'pagecontent'
- add the class 'pageX' to link it to a menu entry defined in step 1

3- copy and include the .js files (preferably right before </body>)

4- include this after the lines included in step 3