$(document).ready(function () {       
 
        // default CSS is set to display all items (a must for accessibility) so now we hide all detail items
   		$('#accordion ul,#accordion-1 ul').addClass('hide');

   		// now with JS open the first panel & style it with class="acc-active"
   		$('#accordion ul:eq(0),#accordion-1 ul:eq(0)').show();
   		$('#accordion .acc-header:eq(0),#accordion-1 .acc-header:eq(0)').addClass('acc-active');


		// when click panel header
		$('#accordion .acc-header,#accordion-1 .acc-header').mouseover(function () {   

			// slide up all detail items
			$('#accordion ul,#accordion-1 ul').slideUp('slow'); 

			// remove class of active of all panel headers
			$('#accordion .acc-header,#accordion-1 .acc-header').removeClass('acc-active');
            
			// add class="cc-active" to clicked panel & slide down the corresponding detail items
			$(this).addClass('acc-active').next('ul').slideDown(300);	
    
	    //return false;
	    
    });
  
});