$(document).ready(function () {   
        
        // default CSS is set to display all items (a must for accessibility) so now we hide all detail items
   		$('#accordion ul').addClass('hide');
   		
   		// now with JS open the first panel & style it with class="acc-active"
   		$('#accordion ul:eq(0)').show()
   		$('#accordion .acc-header:eq(0)').addClass('acc-active');

		// when click panel header
		$('#accordion .acc-header').click(function () {   
		
			// slide up all detail items
			$('#accordion ul').slideUp('slow');

			// remove class of active of all panel headers
			$('#accordion .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;
	    
    });   
     
});