MooTabs 0.1

Allows creation of Tabbed-Panes and provides transition effects when switching between the panes.


Nayaab Akhtar
Current version
GitHub Issues



  • core/1.2.1: *

How to use

The following HTML snippet lists the tabs and their contents:

<ul class="tabs">
    <li>Simple to use</li>
    <li>Easy to extend</li>
    <li>Very much customizable</li>
<ul class="contents">
        <h1>MooTabs is very convinient and easy to use.</h1>
            Default setup allows you to create Tabpane which auto plays.
            The plugin provides several options for customization.
        <h1>You could easily extend the MooTabs class, thanks to MooTools</h1>
            The MooTools architecture allows easy extensions and improvements
            without hacking into the library code.
        <h1>Customize almost everything</h1>
            You could customize the transitions of effect, duration,
            autoPlay and it's duration as well.

The following CSS styling necessary for proper functioning:

body {
    font: 1em "Myriad Pro", Helvetica, Arial;
    background: #121212;
    margin: 20px;
    color: #fff;

#wrapper {
    width: 500px;
    margin: 0 auto;

ul.tabs, ul.contents {
    list-style-type: none;
    padding: 0;
    margin: 0;

ul.tabs { float: left}
ul.contents {
    clear: left;
    width: 20000em;
    position: absolute;
    left: 0;
    top: 0;

ul.tabs li {
    margin: 10px 4px;
    display: inline;
    float: left;
    padding: 4px 10px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    text-shadow: 1px 1px 1px #eee;
    background: #999;
    color: #000;
    font-weight: bold;
    cursor: default;

ul.tabs { background: #ddd; }
ul.tabs li:active { background: #666; }

ul.contents li { float: left; display: block; width: 404px; padding: 20px; }

.contentsWindow {
    width: 454px;
    height: 300px;
    clear: left;
    overflow: hidden;
    position: relative;
    border: 1px solid #999;
    margin: 10px 0;
    background: #0C0C0C;

You can make them appear as tab panes using following code:

var tabs, contents;
tabs = $$('.tabs');
contents = $$('.contents');

var tabView = new MooTabs(tabs, contents);

Known Bugs

  • Currently allows only one tab pane per page
  • The above limitation though could be rouded off by using different class names eg. tab-1, content-1, tab-2, content-2 and soon. Use different MooTabs object for each Tabpane.


A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus