title: How to optimize my jquery code
body: <p>I'm working on a new design for an organization at my college, and I've used JQuery to get my nav bar to do what I want it to do (slide down on specific nav-item click, slide back up if that or another nav-item is clicked [and slide the new nav-item down if the second case is true]). </p>
  
  <p>Relevant JQuery:</p>
  
  <pre><code>function toggleMembers() {
  if ($("#members-drop-down").is(":visible")) {
      $("#members-container").animate(
      {
          opacity: "0"
      },
      600,
      function(){
          $("#members-drop-down").slideUp();
      }
  );
  $("#members").removeClass('active');
  }
  else if ($("#about-drop-down").is(":visible")) {
      $("#about-container").animate(
          {
               opacity: "0"
          },
          600,
          function(){
               $("#about-drop-down").slideUp();
          }
      );
      $("#about").removeClass('active');
      $("#members-drop-down").slideDown(600, function(){
          $("#members-container").animate(
               {
                    opacity: "1"
               },
               600
          );
      });
      $("#members").addClass('active');
  }
  else if ($("#store-drop-down").is(":visible")) {
      $("#store-container").animate(
          {
               opacity: "0"
          },
          600,
          function(){
               $("#store-drop-down").slideUp();
          }
      );
      $("#store").removeClass('active');
      $("#members-drop-down").slideDown(600, function(){
      $("#members-container").animate(
          {
               opacity: "1"
          },
          600
      );
      });
      $("#members").addClass('active');
  }
  else {
      $("#members-drop-down").slideDown(600, function(){
          $("#members-container").animate(
                {
                      opacity: "1"
                },
                600
          );
      });
      $("#members").addClass('active');
  }   
  }
  </code></pre>
  
  <p>Unfortunately, though, the JQuery I wrote takes up more space than all of the HTML. How can I shorten and optimize this?</p>
  
  <p>My JSFiddle <a href="http://jsfiddle.net/zJ8wW/" rel="nofollow">with the full code</a>.</p>