Accordion Vertical Flip Within Unordered List

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="accordionWrapper" data-mouseover="false" data-hovering="false">
        <div class="accordionTitle softTrainColor">
            <div class="drawerTitleFront softTrainBackground">ACCORDION TITLE 1</div>
            <div class="drawerTitleBack">ACCORDION TITLE 1</div>
        </div>
        <div class="drawer">
            <div class="drawerColL">
                <div class="drawerHeading softTrainColor">Accordion 1 Heading 1</div>
                <ul>
                    <li>Accordion 1 Text 1</li>
                    <li><a href="#">Accordion 1 Text 2</a></li>
                </ul>
            </div>
            <div class="drawerColR">
                <div class="drawerHeading softTrainColor">Accordion 1 Heading 2</div>
                <ul>
                    <li>Accordion 1 Text 1</li>
                    <li><a href="#">Accordion 1 Text 2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="accordionWrapper" data-mouseover="false" data-hovering="false">
        <div class="accordionTitle">
            <div class="drawerTitleFront softTrainBackground">ACCORDION TITLE 2</div>
            <div class="drawerTitleBack">ACCORDION TITLE 2</div>
        </div>
        <div class="drawer">
             <div class="drawerHeading softTrainColor">Accordion 2 Heading</div>

            <ul class="drawerText">
                <li>Accordion 2 Text 1</li>
                <li>Accordion 2 Text 2</li>
            </ul>
        </div>
    </div>
    <div class="accordionWrapper" data-mouseover="false" data-hovering="false">
        <div class="accordionTitle">
            <div class="drawerTitleFront...

CSS

@import url('http://fonts.googleapis.com/css?family=Open+Sans');
@font-face{font-family:FontAwesome; src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix)}

body {width:80%; font-family:'Open Sans', sans-serif; font-weight:300; letter-spacing:1px; color:#4D4D4D; padding-top:0px;}

.container {width:80%;}


/*accordion*/
.accordionWrapper {width:100%; display:inline-block;}
.accordionTitle {width:100%; height:50px; position: relative; margin:10px 0 0px 0; font-family: 'Open Sans', sans-serif; font-size:18px; font-weight:300;}

/*title*/
.drawerTitleFront {color:#FFFFFF; width:100%; height:100%; position:absolute; cursor:pointer; line-height:50px; vertical-align:middle; border:1px solid #0593C9;}
.drawerTitleFront:before {font-family:FontAwesome; content:'\f0a7 \00a0 \00a0 \00a0'; padding:0 0 0 20px;}
.drawerTitleBack {color: #FFFFFF; width: 100%; height: 100%; position: absolute; background-color: #999999; cursor:pointer; line-height:50px; vertical-align:middle; border:1px solid #999999;}
.drawerTitleBack:before {font-family:FontAwesome; content:'\f0a6 \00a0 \00a0 \00a0'; padding:0 0 0 20px;}
/*drawer*/
.drawer {border:1px solid #999999; display:none; width:100%; margin:0 0 0px 0; padding:0px 0px 0px 0px; list-style:none; overflow:hidden;  -webkit-font-smoothing: antialiased;}
/*heading*/
.drawerHeading {font-size:14px; padding:10px 0 0px 20px;}
.drawer  ul {list-style:none; padding:0 0 10px 0; margin:0;}
/*text*/
.drawer  ul  li {font-size:12px; display:block; color:#999999; line-height:20px; padding:0 0 0px 40px;}
.drawer  ul  li  a {color:#FF8000; text-decoration:none;}
.drawer  ul  li  a:hover {text-decoration:none; color:#999999;}
/*2 col*/
.drawerColL {width:50%; float:left; vertical-align:top; margin:0; font-size:12px; color:#999999; line-height:20px; padding:3px 0 7px 0;}
.drawerColR {width:50%; float:right; vertical-align:top; margin:0; font-size:12px; color:#999999; line-height:20px; padding:3px 0 7px...

JavaScript

//using TweenLite.set() takes care of all vendor-prefixes
TweenLite.set(".accordionWrapper", {
    perspective: "500px"
});
TweenLite.set(".accordionTitle", {
    transformStyle: "preserve-3d"
});
TweenLite.set(".drawerTitleBack", {
    rotationX: -180
});
TweenLite.set([".drawerTitleBack", ".drawerTitleFront"], {
    backfaceVisibility: "hidden"
});


$(".accordionWrapper").mouseover(function () {
    var me = $(this);
    me.data("mouseover", true);
    TweenLite.to($(this).find(".accordionTitle"), .4, {
        rotationX: -180,
        ease: Expo.easeInOutCirc,
        onComplete: function () {
            if (!me.data("mouseover")) {
                TweenLite.to(this.target, .4, {
                    rotationX: 0,
                    ease: Expo.easeInOutCirc,
                });
            } else {
                me.data("hovering", true);
            }
        }
    });
});

$(".accordionWrapper").mouseleave(function () {
    var me = $(this);
    me.data("mouseover", false);
    if (me.data("hovering")) {
        me.data("hovering", false);
        TweenLite.to($(this).find(".accordionTitle"), .4, {
            rotationX: 0,
            ease: Expo.easeInOutCirc
        });
    }
});

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