$(document).ready(function () {   
        var wat = "";
		var goto = "";
		
        // 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);	
			
			$(this).addClass('acc-active');

			wat = $(this).attr("id")
			
			goto = $('#' + wat + ' a').attr("href");
			
			//alert($(this).next('a').html());
			if(goto !== undefined) {			
				document.location.href=goto;
			}
    
	    return false;
	    
    });   
     
});
