// JavaScript Document
$(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;

 });

});