Accordion Vertical Flip Within Unordered List

HTML

<!--section 2-->
<div id="subDivTab2" class="subDivSwitch">
    <div class="subRightSectionTitle blackColor">SECTION 2 TITLE
    </div>
    <div class="subRightSectionText grayColor"><span class="subRightSectionTextHeader">Section 2 accordion text.</span>
    </div>
    <div id="drawer" class="courseDrawer">
        <ul>
            <li class="vertical vFlipContainer" ontouchstart="this.classList.toggle('hover');">
            <a class="vFlipper" href="#" onclick="return false;">ACCORDION TITLE 1</a>
                <ul>
                    <li>Accordion 1 Heading</li>
                    <li>Accordion 1 Text 1<br>Accordion 1 Text 2</li>
                </ul>
            </li>
            <li class="vertical vFlipContainer" ontouchstart="this.classList.toggle('hover');">
            <a class="vFlipper" href="#" onclick="return false;">ACCORDION 2 TITLE</a>
                <ul>
                    <li>Accordion 2 Heading</li>
                    <li>Accordion 2 Text 1<br>Accordion 2 Text 2</li>
                </ul>
            </li>
            <li class="vertical vFlipContainer" ontouchstart="this.classList.toggle('hover');">
            <a class="vFlipper" href="#" onclick="return false;">ACCORDION 3 TITLE</a>
                <ul>
                    <li>Accordion 3 Heading</li>
                    <li>Accordion 3 Text 1<br>Accordion 3 Text 2</li>
                </ul>
            </li>
            <li class="vertical vFlipContainer" ontouchstart="this.classList.toggle('hover');">
            <a class="vFlipper" href="#" onclick="return false;">ACCORDION 4 TITLE</a>
                <ul>
                    <li>Accordion 4 Heading</li>
                    <li>Accordion 4 Text 1<br>Accordion 4 Text 2</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

/* MISC ---- */
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
body {font-family: 'Open Sans', sans-serif; font-weight:300; letter-spacing:1px; color:#4D4D4D; padding-top:0px; }
.blackColor {color:#000000 !important;}
.grayColor {color:#999999 !important;}

/* ACCORDION GENERIC ---- */
#drawer {width:100%; text-align:left; margin-top:20px;}
#drawer ul { list-style:none; padding:0;}
/*hands*/
#drawer > ul > li.has-sub > a:before {font-family:FontAwesome; content:'\f0a7 \00a0';}
#drawer > ul > li.has-sub.active > a:before {font-family:FontAwesome; content:'\f0a6 \00a0';}
/*text*/
#drawer ul ul li:nth-child(even) {padding-left:60px; font-size:14px; color:#999999; line-height:24px;}

/* ACCORDION SPECIFIC ---- */
/*title*/
#drawer.courseDrawer > ul > li > a {font-size:16px; display:block; background-color:#FF8000; color:#FFF; margin-top:20px; padding:10px; text-decoration:none; line-height:20px;}
#drawer.courseDrawer > ul > li > a:hover {text-decoration:none; background-color:#999999; color:#FFF;}
/*heading*/
#drawer.courseDrawer ul ul li:nth-child(odd) {padding-left:30px; font-size:14px; color:#000000; line-height:18px;}
/*dropdown*/
#drawer.courseDrawer ul ul {display:none; list-style:none; padding:10px 0 20px 0; margin:0 0 20px 0; border-left:1px solid #FF8000; border-right:1px solid #FF8000; border-bottom:1px solid #FF8000;}

/* VERTICAL FLIP ---- */
.vFlipContainer {perspective:1000px;}
.vFlipContainer, .vFront, .vBack {width:100%; height:auto;}
/* flip speed */
.vFlipper {transition:0.3s; transform-style:preserve-3d; position:relative;}
/* hide back */
.vFront, .vBack {backface-visibility:hidden; -webkit-backface-visibility:hidden;}
/* front */
.vFront {z-index:1; background-color:#FF8000; color:#FFF;}
/* back */
.vBack {transform:rotateX(-180deg); background-color:#4FAEDD; color:#FFF; animation:vtoFront 0.3s linear normal forwards;}
.vertical.vFlipContainer {position:relative;}
.vertical.vFlipContainer:hover .vBack {animation-delay:0.3s;...

JavaScript

//JQUERY FOR THE ACCORDION
$(document).ready(function(){
    $('#drawer > ul > li:has(ul)').addClass("has-sub");
    $('#drawer > ul > li > a').click(function() {
        var checkElement = $(this).next();
        $('#drawer li').removeClass('active');
        $(this).closest('li').addClass('active');   
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#drawer ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
        }
        if (checkElement.is('ul')) {
            return false;
        } else {
            return true;    
        }       
    });
});