$(document).ready(function() {

     $("#sectionsNav ul").replaceWith("<p><a href=\"#\" id=\"showall\">Expand All</a> | <a href=\"#\" id=\"closeall\">Collapse All</a></p>");
      
     $("a#showall").click(function() {
	 $(".sectionContent").show();
	 $(".sectionTitle").removeClass("hide");
	 $(".subSectionContent").show();
	 $(".subSectionTitle").removeClass("hide");
       });

     $("a#closeall").click(function() {
	 $(".sectionContent").hide();
         $(".sectionTitle").addClass("hide");
	 $(".subSectionContent").hide();
	 $(".subSectionTitle").addClass("hide");
       });

     $(".section").each(function(i) {
       $(this).attr("id", "section" + i);
     }); 

     $(".subSection").each(function(i) {
       $(this).attr("id", "subSection" + i);
     });

     $(".sectionTitle h3").click(function(event) {
	 var id = $(this).parent().parent().attr("id");
	 $("div[id=" + id + "] .sectionContent").toggle();
	 $(this).parent().toggleClass("hide");
         event.preventDefault();
     });


     $(".subSectionTitle h4").click(function(event) {
	 var id = $(this).parent().parent().attr("id");
	 $("div[id=" + id + "] .subSectionContent").toggle();
	 $(this).parent().toggleClass("hide");
         event.preventDefault();
     });

     $(".sectionTitle h3").wrapInner("<a href=\"#\"></a>");

     $(".subSectionTitle h4").wrapInner("<a href=\"#\"></a>");

     $(".sectionContent").hide();
     
     $(".subSectionContent").hide();
 
     $(".sectionTitle").addClass("show");

     $(".sectionTitle").addClass("hide");
         
     $(".subSectionTitle").addClass("show");
	
     $(".subSectionTitle").addClass("hide");

   })