JSFiddle - React, Tailwind, and code Playground

by Marc

HTML

<script src="http://www.coconuts.nl/assets/templates/c/accordion/jquery.accordion.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">


<div class="acc-holder">		
    
    <div class="acc styled">
        <h3 class="accordion" id="open"><i class="fa fa-angle-down"></i>Click me! Bla bla bla 1</h3>
        <p>Here some text bla bla bla :)</p>
    </div>
    
    <div class="acc styled">
        <h3 class="accordion"><i class="fa fa-angle-down"></i>Click me! Bla bla bla 2</h3>
        <p>Here some text bla bla bla :)</p>
    </div>
    
    <div class="acc styled">
        <h3 class="accordion"><i class="fa fa-angle-down"></i>Click me! Bla bla bla 3</h3>
        <p>Here some text bla bla bla :)</p>
    </div>
    
</div>

CSS

* {font-family:Arial;}

.accordion{display:block; padding-top:10px; padding-bottom:14px; cursor:pointer;}
.accordion i{float:right; margin-left:12px;}
.acc{padding:8px 20px; border-radius: 6px; border-style: solid; border-width: 1px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); color:#333;  
background-color: #eee; background-image: linear-gradient(to bottom, #eee, #f5f5f5); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #ccc; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2); margin-bottom:10px;}
.acc p{padding:4px 15px 6px 0;}

JavaScript

$(document).ready(function() {
    $.fn.slideFadeToggle = function(speed, easing, callback) {
        return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    };
    $('.accordion').accordion({
        //defaultOpen: 'open',
        speed: 'fast',
        animateOpen: function (elem, opts) { 
            elem.next().stop(true, true).slideFadeToggle(opts.speed);
        },
        animateClose: function (elem, opts) { 
            elem.next().stop(true, true).slideFadeToggle(opts.speed);
        }
    });
});

// SOMEHOW class="fa fa-angle-down" 
// needs to be class="fa fa-angle-up" 
// when clicking on the .accordion

// HOW?