While this solution may not be the most compact, it will fulfill your requirements precisely. In the original design, only the title bar is gray when hovered over, but the bar is flipped when the expanded content is hovered over. My variation ensures that the title bar's color remains changed throughout the flipping of the bar, not just when hovering over it.
Adjusted 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; color:#FFF; margin-top:20px; padding:10px; text-decoration:none; line-height:20px;}
#drawer.courseDrawer > ul > li > a:hover {text-decoration:none; 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; animation:vtoBack 0.3s linear normal forwards;}
@keyframes vtoBack {
0% {z-index:0;}
100% {z-index:1;}
}
@keyframes vtoFront {
0% {z-index:1;}
100% {z-index:0;}
}
.vertical.vFlipContainer .vFlipper {transform-origin:100% 50%; background-color:#FF8000;}
.vertical.vFlipContainer:hover .vFlipper {transform:rotateX(-180deg); background-color:#999999;}
.accTitle {
position: absolute;
background: transparent !important;
top: -20px;
left: 0;
right: 0;
}
Edited Accordion Item:
<li class="vertical vFlipContainer" ontouchstart="this.classList.toggle('hover');">
<a class="vFlipper" href="#" onclick="return false;"></a>
<a class="accTitle" href="#" onclick="return false;">ACCORDION 1 TITLE</a>
<ul>
<li>Accordion 1 Heading</li>
<li>Accordion 1 Text 1<br>Accordion 1 Text 2</li>
</ul>
</li>
This solution provides a quick fix and ensures that the text does not flip more than the set -180deg.
The adjustment made involves removing the background-color from
#drawer.courseDrawer > ul > li > a
and
#drawer.courseDrawer > ul > li > a:hover
, and adding it to
.vertical.vFlipContainer .vFlipper
and
.vertical.vFlipContainer:hover .vFlipper
respectively. This change allows the background color to transition at any point during hovering. Additionally, the extra class and anchor prevent the text from flipping.
JSFiddle: http://jsfiddle.net/zbg15rbx/
I trust this information is beneficial. ^^