Show/Hide Div Collapse w/ Arrows

by zuhloobie

HTML

<div id="drawer">
<ul>
   <li><a href="#" onclick="return false;">GROUP ONE TITLE</a>
      <ul>
         <li>Group One Header</li>
         <li>Group one text.</li>
      </ul>
   </li>
   <li><a href="#" onclick="return false;">GROUP TWO TITLE</a>
      <ul>
         <li>Group Two Header</li>
         <li>Group two text.</li>
      </ul>
   </li>
   <li><a href="#" onclick="return false;">GROUP THREE TITLE</a>
      <ul>
         <li>Group Three Header</li>
         <li>Group three text.</li>
      </ul>
   </li>
</ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

/*container*/
#drawer {width:100%; font-family: 'Open Sans', sans-serif;}
#drawer ul { list-style:none; padding:0;}

/*title*/
#drawer > ul > li > a {font-size:16px; display:block; background-color:#0593C9; color:#FFF; margin-top:20px; padding:10px; text-decoration:none;}
#drawer > ul > li > a:hover {text-decoration:none; background-color:#FF8000; color:#FFF;}

/*title arrows*/
#drawer > ul > li.has-sub > a:before {content:'\261F \00a0';}
#drawer > ul > li.has-sub.active > a:before {content:'\261D \00a0';}

/*hidden*/
#drawer ul ul {display:none; list-style:none; padding:10px 0 20px 0; margin:0 0 20px 0; border-left:1px solid #0593C9; border-right:1px solid #0593C9; border-bottom:1px solid #0593C9;}

/*header*/
#drawer ul ul li {padding-left:30px; background:#FFF; font-size:14px; color:#FF8000;}

/*info*/
#drawer ul ul li:last-child {font-size:13px; color:#4D4D4D;}

JavaScript

$(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;	
    }		
  });
});