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

		// when click panel header
		$('#accordionH .acc-headerH').click(function () {   
		
			// slide up all detail items
			$('#accordionH ul').slideUp('slow');
			
						// remove class of active of all panel headers
			$('#accordionH .acc-headerH').removeClass('acc-activeH');
			
			// add class="cc-active" to clicked panel & slide down the corresponding detail items
			$(this).addClass('acc-activeH').next('ul').slideDown(300);	
    
	    return false;
	    
    });   
     
});