title: Better way to show/hide multiple divs?
body: <p>I have 8 links that all need to show a div on click.  I want only 1 div to show at a time so when click on a new link the div that is currently displayed gets hidden and a new one gets displayed.  So far I have a jQuery solution that works but it's ugly.  Is there an easier/more correct way to accomplish what I want?</p>
  
  <pre><code>&lt;div&gt;
  &lt;a href="#" class="link"&gt;Click Link&lt;/a&gt;&lt;br /&gt;
  &lt;a href="#" class="link2"&gt;Click Link 2&lt;/a&gt;&lt;br /&gt;
  &lt;a href="#" class="link3"&gt;Click Link 3&lt;/a&gt;&lt;br /&gt;
  &lt;a href="#" class="link4"&gt;Click Link 4&lt;/a&gt;&lt;br /&gt;
  &lt;a href="#" class="link5"&gt;Click Link 5&lt;/a&gt;&lt;br /&gt;
  &lt;a href="#" class="link6"&gt;Click Link 6&lt;/a&gt;&lt;br /&gt;
  &lt;a href="#" class="link7"&gt;Click Link 7&lt;/a&gt;&lt;br /&gt;
  &lt;a href="#" class="link8"&gt;Click Link 8&lt;/a&gt;&lt;br /&gt;
   &lt;div class="testVid hideDiv" style="background:pink; height:200px"&gt;Test Vid Div&lt;br /&gt;&lt;br /&gt;&lt;span class="close"&gt;CLOSE&lt;/span&gt;&lt;/div&gt;
  &lt;div class="testVid2  hideDiv" style="background:pink; height:200px"&gt;Test Vid Div 2&lt;br /&gt;&lt;br /&gt;&lt;span class="close2"&gt;CLOSE 2&lt;/span&gt;&lt;/div&gt;
  &lt;div class="testVid3 hideDiv" style="background:pink; height:200px"&gt;Test Vid Div 3&lt;br /&gt;&lt;br /&gt;&lt;span class="close3"&gt;CLOSE 3&lt;/span&gt;&lt;/div&gt;
  &lt;div class="testVid4  hideDiv" style="background:pink; height:200px"&gt;Test Vid Div 4&lt;br /&gt;&lt;br /&gt;&lt;span class="close4"&gt;CLOSE 4&lt;/span&gt;&lt;/div&gt;
  &lt;div class="testVid5 hideDiv" style="background:pink; height:200px"&gt;Test Vid Div 5&lt;br /&gt;&lt;br /&gt;&lt;span class="close5"&gt;CLOSE 5&lt;/span&gt;&lt;/div&gt;
  &lt;div class="testVid6 hideDiv" style="background:pink; height:200px"&gt;Test Vid Div 6&lt;br /&gt;&lt;br /&gt;&lt;span class="close6"&gt;CLOSE 6&lt;/span&gt;&lt;/div&gt;
  &lt;div class="testVid7 hideDiv" style="background:pink; height:200px"&gt;Test Vid Div 7&lt;br /&gt;&lt;br /&gt;&lt;span class="close7"&gt;CLOSE 7&lt;/span&gt;&lt;/div&gt;
  &lt;div class="testVid8 hideDiv" style="background:pink; height:200px"&gt;Test Vid Div 8&lt;br /&gt;&lt;br /&gt;&lt;span class="close8"&gt;CLOSE 8&lt;/span&gt;&lt;/div&gt;
  
  $(document).ready(function(){
      $("a.link").click(function(){
          $(".testVid").show();
          $(".testVid2").hide();
          $(".testVid3").hide();
          $(".testVid4").hide();
          $(".testVid5").hide();
          $(".testVid6").hide();
          $(".testVid7").hide();
          $(".testVid8").hide();
      });
      $(".close").click(function(){
          $(".testVid").hide();
          });
  
      $("a.link2").click(function(){
          $(".testVid2").show();
          $(".testVid").hide();
          $(".testVid3").hide();
          $(".testVid4").hide();
          $(".testVid5").hide();
          $(".testVid6").hide();
          $(".testVid7").hide();
          $(".testVid8").hide();
      });
      $(".close2").click(function(){
          $(".testVid2").hide();
          });
  
      $("a.link3").click(function(){
          $(".testVid3").show();
          $(".testVid2").hide();
          $(".testVid").hide();
          $(".testVid4").hide();
          $(".testVid5").hide();
          $(".testVid6").hide();
          $(".testVid7").hide();
          $(".testVid8").hide();
      });
      $(".close3").click(function(){
          $(".testVid3").hide();
          });
  
      $("a.link4").click(function(){
          $(".testVid4").show();
          $(".testVid2").hide();
          $(".testVid3").hide();
          $(".testVid").hide();
          $(".testVid5").hide();
          $(".testVid6").hide();
          $(".testVid7").hide();
          $(".testVid8").hide();
      });
      $(".close4").click(function(){
          $(".testVid4").hide();
          });
  
      $("a.link5").click(function(){
          $(".testVid5").show();
          $(".testVid2").hide();
          $(".testVid3").hide();
          $(".testVid4").hide();
          $(".testVid").hide();
          $(".testVid6").hide();
          $(".testVid7").hide();
          $(".testVid8").hide();
      });
      $(".close5").click(function(){
          $(".testVid5").hide();
          })
  
      ;$("a.link6").click(function(){
          $(".testVid6").show();
          $(".testVid2").hide();
          $(".testVid3").hide();
          $(".testVid4").hide();
          $(".testVid5").hide();
          $(".testVid").hide();
          $(".testVid7").hide();
          $(".testVid8").hide();
      });
      $(".close6").click(function(){
          $(".testVid6").hide();
          });
  
      $("a.link7").click(function(){
          $(".testVid7").show();
          $(".testVid2").hide();
          $(".testVid3").hide();
          $(".testVid4").hide();
          $(".testVid5").hide();
          $(".testVid6").hide();
          $(".testVid").hide();
          $(".testVid8").hide();
      });
      $(".close7").click(function(){
          $(".testVid7").hide();
          });
  
      $("a.link8").click(function(){
          $(".testVid8").show();
          $(".testVid2").hide();
          $(".testVid3").hide();
          $(".testVid4").hide();
          $(".testVid5").hide();
          $(".testVid6").hide();
          $(".testVid7").hide();
          $(".testVid").hide();
      });
      $(".close8").click(function(){
          $(".testVid8").hide();
          });
      $(".hideDiv").css('display', 'none');
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/comatoseduck/sHjUG/" rel="nofollow">Fiddle Here</a></p>