JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<div id="accordion-2">
    <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>
    
</div>

<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>
    
</div>

CSS

#accordion    {
    margin: 20px 0 0;
    max-width: 400px;
}
#accordion H2 {
    background: #6B7B95;
    color: white;
    cursor: pointer;
    font: 12px Helvetica, Arial, sans-serif;
    line-height: 16px;
    margin: 0 0 4px 0;
    padding: 3px 5px 1px;
}
#accordion .content {
    background-color: #F4F5F5;
}
#accordion .content p {
    margin: 0.5em 0;
    padding: 0 6px 8px 6px;
}




#accordion-2    {
    margin: 20px 0 0;
    max-width: 400px;
}
#accordion-2 H2 {
    background: #000;
    color: white;
    cursor: pointer;
    font: 12px Helvetica, Arial, sans-serif;
    line-height: 16px;
    margin: 0 0 4px 0;
    padding: 3px 5px 1px;
}
#accordion-2 .content {
    background-color: #F4F5F5;
}
#accordion-2 .content p {
    margin: 0.5em 0;
    padding: 0 6px 8px 6px;
}

JavaScript

window.addEvent('domready', function() {
    new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .content');
    
    new Fx.Accordion($('accordion-2'), '#accordion-2 h2', '#accordion-2 .content');
});