Full Animation After Hover

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenLite.min.js"></script>
<div id="container">
    <div class="barWrapper" data-mouseover="false" data-hovering="false">
        <div class="bar">
            <div class="front">ACCORDION TITLE 1</div>
            <div class="back">ACCORDION TITLE 1</div>
        </div>
        <div class="drawer">
             <h4>Accordion 1 Heading</h4>

            <ul>
                <li>Accordion 1 Text 1</li>
                <li>Accordion 1 Text 2</li>
            </ul>
        </div>
    </div>
    <div class="barWrapper" data-mouseover="false" data-hovering="false">
        <div class="bar">
            <div class="front">ACCORDION TITLE 1</div>
            <div class="back">ACCORDION TITLE 1</div>
        </div>
        <div class="drawer">
             <h4>Accordion 1 Heading</h4>

            <ul>
                <li>Accordion 1 Text 1</li>
                <li>Accordion 1 Text 2</li>
            </ul>
        </div>
    </div>
    <div class="barWrapper" data-mouseover="false" data-hovering="false">
        <div class="bar">
            <div class="front">ACCORDION TITLE 1</div>
            <div class="back">ACCORDION TITLE 1</div>
        </div>
        <div class="drawer">
             <h4>Accordion 1 Heading</h4>

            <ul>
                <li>Accordion 1 Text 1</li>
                <li>Accordion 1 Text 2</li>
            </ul>
        </div>
    </div>
    <div class="barWrapper" data-mouseover="false" data-hovering="false">
        <div class="bar">
            <div class="front">ACCORDION TITLE 1</div>
            <div class="back">ACCORDION TITLE 1</div>
        </div>
        <div class="drawer">
             <h4>Accordion 1 Heading</h4>

            <ul>
                <li>Accordion 1 Text...

CSS

@import url('http://fonts.googleapis.com/css?family=Open+Sans');
 body {
    width: 90%;
    font-family:'Open Sans', sans-serif;
    font-weight: 300;
    letter-spacing: 1px;
    color: #4D4D4D;
    padding-top: 0px;
}
.container {
    width: 90%;
}
.barWrapper {
    width: 100%;
    margin: 5px;
    display: inline-block;
}
.bar {
    width: 100%;
    height: 50px;
    position: relative;
    color: white;
}
.front {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #FF8000;
}
.back {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: grey;
}
.drawer {
    border: 1px solid #FF8000;
    display: none;
}
ul {
    list-style-type: none;
}

JavaScript

//using TweenLite.set() takes care of all vendor-prefixes
TweenLite.set(".barWrapper", {
    perspective: 500
});
TweenLite.set(".bar", {
    transformStyle: "preserve-3d"
});
TweenLite.set(".back", {
    rotationX: -180
});
TweenLite.set([".back", ".front"], {
    backfaceVisibility: "hidden"
});


$(".barWrapper").mouseover(function () {
    var me = $(this);
    me.data("mouseover", true);
    TweenLite.to($(this).find(".bar"), 0.5, {
        rotationX: 180,
        ease: Expo.easeOut,
        onComplete: function () {
            if (!me.data("mouseover")) {
                TweenLite.to(this.target, 0.5, {
                    rotationX: 0,
                    ease: Expo.easeOut
                });
            } else {
                me.data("hovering", true);
            }
        }
    });
});

$(".barWrapper").mouseleave(function () {
    var me = $(this);
    me.data("mouseover", false);
    if (me.data("hovering")) {
        me.data("hovering", false);
        TweenLite.to($(this).find(".bar"), 0.5, {
            rotationX: 0,
            ease: Expo.easeOut
        });
    }
});

$(".bar").on('click', function () {
    var $drawer = $(this).next(".drawer");
    $drawer.slideToggle();
    $(".drawer").not($drawer).slideUp();
});