$(document).ready(function() {
  $("a.menu").click(function() {
    var aClicked = $(this);
    var divExpanded = "#"+$("div.collapsible:visible").attr("id");
    var aClickedDiv=$(this).attr('rel');
    // No div is expanded, expand clicked div (start)
    if (divExpanded == "#undefined") {      
      $(aClicked).addClass("active");
      if (aClickedDiv == '#key') {
        $(aClickedDiv).slideDown(1000);
      }
      else {
        $(aClickedDiv).slideDown("slow");
      }
    }
    // Clicked div is expanded div, collapse it
    else if (divExpanded == aClickedDiv) {
      $(aClicked).removeClass("active");
      if (aClickedDiv == '#key') {
        $(aClickedDiv).slideUp(1000);
      }
      else {
        $(aClickedDiv).slideUp("slow");
      }
    }
    // Collapse expanded div, expand clicked div
    else {
      $("a.menu").removeClass("active");
      $(aClicked).addClass("active");
      if (aClickedDiv == '#key') {
        $(divExpanded).slideUp("slow", function() { 
          $(aClickedDiv).slideDown(1000);
        });
      }
      else {
        $(divExpanded).slideUp("slow", function() { 
          $(aClickedDiv).slideDown("slow");
        });
      }
    }
  });
});