title: Toggling multiple DIVs with jQuery
body: <p>I have three info panels (divs with IDs of <code>panel-one</code>, <code>panel-two</code> and <code>panel-three</code>, all with the class <code>info-panel</code>) which I want to have slide in and out on the click of a link (these have the IDs <code>toggle-one</code>, <code>toggle-two</code> and <code>toggle-three</code>, all with the class <code>toggle</code>). If one of the divs is showing when one of the other links is clicked, I want to hide the visible div and show the new one. If the div's own link is clicked, I want to toggle the show/hide. I'm using the following code to do this:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a id="toggle-one" class="toggle"&gt;One&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="toggle-two" class="toggle"&gt;Two&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="toggle-three" class="toggle"&gt;Three&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="panel-one" class="info-panel"&gt;&lt;!-- content here --&gt;&lt;/div&gt;
  &lt;div id="panel-two" class="info-panel"&gt;&lt;!-- content here --&gt;&lt;/div&gt;
  &lt;div id="panel-three" class="info-panel"&gt;&lt;!-- content here --&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$("#toggle-one").click(function () {
      if($("#panel-two").is(":visible")) {
          $("#panel-two").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
      } else if($("#panel-three").css("z-index", "9997").is(":visible")) {
          $("#panel-three").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
      }
      $("#panel-one").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
      return false;
  });
  
  $("#toggle-two").click(function () {
      if($("#panel-one").is(":visible")) {
          $("#panel-one").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
      } else if($("#panel-three").is(":visible")) {
          $("#formlink").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
      } 
      $("#panel-two").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
      return false;
  });
  
  $("#toggle-three").click(function () {
      if($("#panel-one").is(":visible")) {
          $("#panel-one").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
      }  else if($("#panel-two").is(":visible")) {
          $("#panel-two").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
      }
      $("#panel-three").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
      return false;
  });
  </code></pre>
  
  <p>It works, but it's very verbose and won't scale well - managing three divs of info is fine, but if/when the time comes to add more, it's going to turn into a major pain to maintain. I've tried using an approach like the one outlined in <a href="https://stackoverflow.com/questions/6967081/show-hide-multiple-divs-with-jquery">Show/Hide Multiple Divs with Jquery</a>, but can't seem to get it to work properly - the toggle and hide behaviours don't work well (hidden dive show when they shouldn't then immediately hide and things like that). Likewise, I can't seem to get the example shown in <a href="https://stackoverflow.com/questions/10598952/jquery-toggle-on-3-divs">Jquery toggle on 3 divs</a> to work, either.</p>
  
  <p>I'm sure there's a much cleaner way to do this, but as I'm a bit of a jQuery and javascript n00b, I don't really know how to go about tidying it up. What's the best way to tackle this?</p>