$(function(){
  
  //Hide lists
  $("h3 + ul").toggle();
  
  //Add message before first h3
  //$("h3:first").before("<p id='togglemessage'><em><small>Click on the titles below to show or hide the complete lists.</small></em></p>")
  $("h3#first").before("<p id='togglemessage'><em><small>Click on the titles below to show or hide the complete lists.</small></em></p>")
  $("#togglemessage").effect("pulsate", {times:2}, 1500);
  
  
  //Make the h3 titles look like they're clickable
  $("h3").append(" <span class='down'>&darr;</span><span class='up'>&uarr;</span>");
  $(".up").toggle(); //hide the up arrow
  $("h3").css({'cursor':'pointer'});
  
  //Show the list underneath when you click a h3 title
  $("h3").click(function(){ 
  	$(this).next("ul").slideToggle("slow");
  	
  	//Change the arrow at the end the h3 titles
  	$(this).children(".down").toggle();
  	$(this).children(".up").toggle();
  });
  	
});