JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script src="http://fakedarren.github.com/mootools-website/assets/mootools/mootools.js"></script>
<div id="accordion">
  
  <h2>What is MooTools?</h2>
  
  <div class="content">
    <p>MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer.</p>
    <p>It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.</p>
  </div>
  
  <h2>Cool! What licence does it have?</h2>
  
  <div class="content">
    <p>MooTools is released under the Open Source MIT license, which gives you the possibility to use it and modify it in every circumstance.</p>
  </div>
  
  <h2>What browsers does it support?</h2>
  
  <div class="content">
    <p>MooTools is compatible and fully tested with Safari&nbsp;3+, Internet Explorer&nbsp;6+, Firefox&nbsp;2+ (and browsers based on gecko), Opera&nbsp;9+, and Chrome&nbsp;4+.</p>
  </div>

CSS

#accordion  {
  font-family:Calibri,'Trebuchet MS',Verdana;
  font-size:9pt;
  margin: 10px;
  max-width: 400px;
}
  #accordion H2 {
      font-family:Calibri,'Trebuchet MS',Verdana;

    background: #6B7B95;
    color: white;
    cursor: pointer;
    font: 12px Helvetica, Arial, sans-serif;
    line-height: 16px;
    margin: 0 0 0 0;
    padding: 3px 5px 1px;
    border-bottom:1px solid #F7F8F8;
  }
  #accordion .content {
    background-color: #F4F5F5;
  }
  #accordion .content p {
    margin: 0.5em 0;
    padding: 0 6px 8px 6px;
  }

JavaScript

/*

DISCLAIMER: this is only a proof of concept to replicate the example here: http://mootools.net/demos/?demo=Accordion
using mootools prime and moofx.

*/

(function($, prime, onready) {

    var Accordion = prime({
        constructor:function(element, togglers, contents){
            var sections = [];
            var togglers = $(togglers);
            var contents = $(contents);
            
            for(var i=0,max = contents.length;i<max;i++){
                var section = $(contents[i]);
                sections.push({element: section, height: section.compute('height')});
            }
            for(var i=0,max = togglers.length;i<max;i++){
                togglers[i].setAttribute('rel',i);
            }
            
            contents.style('overflow','hidden');
            
            this.contents = contents;
            this.sections = sections;
            
            this.show(0);
            
            
            
            var self = this;
            element.on('click', function(e){
                var rel = $(e.target).getAttribute('rel');
                if(rel){
                    self.show(rel-0);
                }
            });
        },
        show:function(index){
                if(this.sections[index]){
            this.contents.animate('height',0);
            this.sections[index].element.animate('height', this.sections[index].height);
        }
        }
    });
    
    onready(function(){
    
      new Accordion($('#accordion'), '#accordion h2', '#accordion .content');

    });
   
})(mootools.$, mootools.prime, mootools.$.ready);