title: jQuery fadeIn and fadeOut - swapping divs
body: <p>I'm new to jQuery and javascript in general but am plugging my way through thanks to sites like these.</p>
  
  <p>I have a page with six hidden divs that are called with corresponding links with individual ids. When each div is made visable (.fadeIn), the currently displayed div is hidden (.fadeOut).</p>
  
  <p>It all works fine but my code seems to be really long and ungainly.
  Is there an easier, shorter, less code-intensive way to perform the same task please?</p>
  
  <p>Here is my js:</p>
  
  <p>Many thanks in advance.
  Mike</p>
  
  <pre><code>$(document).ready(function(){
  
  $("#link1").click(function() {
  $("#panel2").fadeOut("slow", function() {                       
  $("#panel3").fadeOut("slow", function() {
  $("#panel4").fadeOut("slow", function() {                       
  $("#panel5").fadeOut("slow", function() {
  $("#panel6").fadeOut("slow", function() {
  $("#panel1").fadeIn("slow")});
  });
  });
  });
  });
  });
  
  $("#link2").click(function() {
      $("#panel1").fadeOut("slow", function() {
  $("#panel3").fadeOut("slow", function() {
  $("#panel4").fadeOut("slow", function() {                       
  $("#panel5").fadeOut("slow", function() {
  $("#panel6").fadeOut("slow", function() {
  $("#panel2").fadeIn("slow")});
  });
  });
  });
  });
  });
  
  $("#link3").click(function() {
      $("#panel1").fadeOut("slow", function() {
  $("#panel2").fadeOut("slow", function() {
  $("#panel4").fadeOut("slow", function() {                       
  $("#panel5").fadeOut("slow", function() {
  $("#panel6").fadeOut("slow", function() {
  $("#panel3").fadeIn("slow")});
  });
  });
  });
  });
  });
  
  $("#link4").click(function() {
      $("#panel1").fadeOut("slow", function() {
  $("#panel2").fadeOut("slow", function() {
  $("#panel3").fadeOut("slow", function() {                       
  $("#panel5").fadeOut("slow", function() {
  $("#panel6").fadeOut("slow", function() {
  $("#panel4").fadeIn("slow")});
  });
  });
  });
  });
  });
  
  $("#link5").click(function() {
      $("#panel1").fadeOut("slow", function() {
  $("#panel2").fadeOut("slow", function() {
  $("#panel3").fadeOut("slow", function() {                       
  $("#panel4").fadeOut("slow", function() {
  $("#panel6").fadeOut("slow", function() {
  $("#panel5").fadeIn("slow")});
  });
  });
  });
  });
  });
  
  $("#link6").click(function() {
      $("#panel1").fadeOut("slow", function() {
  $("#panel2").fadeOut("slow", function() {
  $("#panel3").fadeOut("slow", function() {                       
  $("#panel4").fadeOut("slow", function() {
  $("#panel5").fadeOut("slow", function() {
  $("#panel6").fadeIn("slow")});
  });
  });
  });
  });
  });
  </code></pre>
  
  <p>});</p>