JSFiddle - React, Tailwind, and code Playground

by andrewwhitaker

HTML

<html>
    <head>
        <script src="http://lab.smashup.it/lab/flip/js/jquery-ui-1.7.2.custom.min.js"></script>
        <script src="http://lab.smashup.it/lab/flip/js/jquery.flip.min.js"></script>
    </head>
    
    <body>
        <div id="flipBoxesContainer">
            <div id="f1" class='flippable'>I'm unflipped 1</div> 
            <div id="f2" class='flippable'>I'm unflipped 2</div> 
            <div id="f3" class='flippable'>I'm unflipped 3</div> 
            <div id="f4" class='flippable'>I'm unflipped 4</div> 
            <div id="f5" class='flippable'>I'm unflipped 5</div> 
            <div id="f6" class='flippable'>I'm unflipped 6</div> 
            <div id="f7" class='flippable'>I'm unflipped 7</div> 
            <div id="f8" class='flippable'>I'm unflipped 8</div> 
            <div id="f9" class='flippable'>I'm unflipped 9</div> 
        </div>
    </body>
</html>

CSS

#flipBoxesContainer{
    width: 490px;
}

.flippable{
    float: left;
    width: 150px;
    height: 150px;
    line-height: 150px;
    background-color: #ff9000;
    font-family: Tahoma, Helvetica;
    font-size: 1em;
    color: #ffc;
    text-align: center;
    margin: 0 10px 10px 0;
}

JavaScript

$(function() {
    var handlerEnabled = true;
    $('.flippable:not(.reverted)').live('click', function() {
        if (handlerEnabled) {
            var $this = $(this);
            var $prevFlip = $('.reverted');
            var $allBoxes = $('.flippable');

            handlerEnabled = false;

            $prevFlip.revertFlip();
            $prevFlip.removeClass("reverted");
            $this.addClass("reverted");

            $this.flip({
                direction: 'lr',
                color: '#82BD2E',
                content: 'now flipped',
                onEnd: function() {
                    handlerEnabled = true;
                }
            });
        }
        return false;
    });
})