title: JQuery Show/Hide on Multiple Divs
body: <p>I was able to get some simple code to work that allows me to show/hide using diffrent buttons for each action, but, I have six different divs that I want to apply this code too and only allow for one to appear at a time and if one is shown to hide it and display the new one. They will be at different places in my page.</p>
  
  <p>I know that I could just write individual code for each DIV, but I'm sure there's an easier way to do it.</p>
  
  <p>I tried a couple different methods, but it just gets messy. Thanks.</p>
  
  <p>Here's the JS:</p>
  
  <pre><code>$(document).ready(function() {
  
      $(".slidingDiv").hide();
      $(".hide,.show").show();
  
      $('.show').click(function() {
          $(".slidingDiv").slideToggle();
          $(".show").hide();
      });
  
      $('.hide').click(function() {
          $(".slidingDiv").slideToggle();
          $(".show").show();
      });
  
  });
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>.slidingDiv {
      height:300px;
      background-color: #99CCFF;
      padding:20px;
      margin-top:10px;
      border-bottom:5px solid #3399FF;
  }
  </code></pre>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;a href="#" class="show"&gt;Show&lt;/a&gt;
  &lt;div class="slidingDiv"&gt;
      Fill this space with really interesting content. &lt;a href="#" class="hide"&gt;Hide&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>