MooShell

• Run
• Edit

• JavaScript
• HTML
• CSS
• Result

/*
---
script: nuTabs.js
decription: nuTabs - MooTools-based, transitionified switcherification
license: MIT-style license.
authors:
 - Oskar Krawczyk (http://nouincolor.com/)
requires: 
  core:1.2.3: 
  - Class.Extras
  - Element.Event
  - Element.Style
  - Element.Dimensions
  - Fx.Tween
  - Fx.Morph
  - String
  - Array
  more:1.2.3.2:
  - Element.Measure
provides: [nuTabs]
...
*/
 
var nuTabs = new Class({
    Implements: [Events, Options],

    options: {
        // transition: $empty,
        navActiveClass: 'selected'
    },
    
    initialize: function(tabsNav, tabsBody, options){
        this.setOptions(options);
        this.tNav = tabsNav;
        this.tBody = tabsBody;
 
        this.attach();
    },
 
    attach: function(){
        this.tNav.each(function(tab, index){
            tab.addEvent('click', this.resize.bindWithEvent(this, index));
        }, this);
    },
 
    alteredHeight: function(index){
        // expose to measurement
        return this.tBody[index].measure(function(){ 
            return this.getSize().y; 
        });
    },
 
    resize: function(e, index){
        e.stop();
        
        this.tBodyCont = this.tBody.getParent();
        this.tNavCont = this.tNav.getParent();
        
        // set transitions if needed
        this.tBodyCont.set('tween', {
            transition: $pick(this.options.transition, 'sine:out')
        });
        
        // alter the wrappers's height
        this.tBodyCont.tween('height', this.alteredHeight(index));    
 
        // absolutize and hide the content items
        this.tBody.set('styles', {
            'position': 'absolute',
            'top': 0,
            'opacity': 0
        }).fade('out');
 
        // show the active content item
        this.tBody[index].set('styles', {
            'display': 'block',
            'opacity': 0
        }).fade('in');
        
        // add class to the active tab
        this.tNavCont.removeClass(this.options.navActiveClass);
        this.tNavCont[index].addClass(this.options.navActiveClass);
    }
});

Elements.implement({
    tabify: function(options){
        this.tabNav = this.slice(0, this.length/2);
        this.tabBody = this.slice(3, this.length);
        new nuTabs($$(this.tabNav), $$(this.tabBody), $pick(options, {}));
    }
});

window.addEvent('domready', function(e) {    
    $$('#tabs-nav a, #tabs-body li').tabify({
        transition: 'bounce:out'
    });
});

<ul id="tabs-nav">
    <li class="selected"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>

<ul id="tabs-body">
    <li class="active">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae arcu et tellus imperdiet pretium. Pellentesque consectetur posuere massa, ut varius lacus vulputate et. Nulla facilisi. Donec semper lorem nec felis ullamcorper imperdiet. Quisque vitae pharetra mi</li>
    <li>Sed euismod laoreet aliquet. Ut id turpis vestibulum tellus rhoncus hendrerit at non diam</li>
    <li>Quisque feugiat, ante vitae pharetra consequat, lorem elit varius arcu, at vulputate nulla magna eu urna. Quisque vitae lacus vel quam pulvinar cursus. Nam sollicitudin cursus interdum. Nam velit orci, gravida aliquet volutpat eu, aliquet sit amet sem. Suspendisse potenti. Praesent sagittis aliquet diam. Nullam leo felis, feugiat at aliquet sed, egestas vel urna. Donec et tristique massa. Praesent in augue sed ipsum mattis auctor eget in justo. Sed non felis id enim fringilla facilisis ut nec purus. Phasellus iaculis ornare luctus</li>
</ul>

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: .8em;
    line-height: 140%;
    background: #C7C3C2;
}

#tabs-nav {
    height: 30px;
}

    #tabs-nav li {
        float: left;
        padding: 0 10px 0 0;
    }

    #tabs-nav li a {
        color: #333;
        font-weight: bold;
        text-decoration: none;
        text-shadow: 0 1px 0 #fff;
        font-size: 1.1em;
        padding: 5px 7px 3px;
    }

    #tabs-nav li.selected a {
        background: #333333;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-bottom: solid 1px #fff;
        color: #C7C3C2;
        text-shadow: none;
    }

#tabs-body {
    position: relative;
    overflow: hidden;
    background: #333333;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-bottom: solid 1px #fff;
}
 
    #tabs-body li {
        padding: 10px;
        color: #fff;
        display: none;
    }
 
    #tabs-body li.active {
        display: block;
    }