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() {
    $('.flippable:not(.reverted)').live('click', function() {
        var $this = $(this);
        var $prevFlip = $('.reverted');
        var $allBoxes = $('.flippable');

        $this.flip({
            direction: 'lr',
            color: '#82BD2E',
            content: 'now flipped',
            onBefore: function($element) {
                console.log("--> on before");
                console.log($element.attr("id"));
                $prevFlip.revertFlip();
                $prevFlip.removeClass('reverted');
            },
            onEnd: function($element) {
                console.log("--> on end");
                console.log($element.attr("id"));
                $this.addClass('reverted');
            }
        })
        return false;
    });
})