title: JQuery Fade Out/Hide Previous DIVS
body: <p>I'm trying to create a simple page where 3 divs overlap one another with various content. Within each DIV is an image (a NEXT button) that should fade out the initially shown DIV, and FadeIn the second DIV. Within that 2nd DIV, is another NEXT button to FadeOut DIV 2 and FadeIn DIV 3.</p>
  
  <p>I'm having problems hiding the previously shown DIV, and all 3 end up showing all their content on top of one another. </p>
  
  <p>Please help:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;style&gt;
  div {
  width:80px; 
  display:none;
  height:80px; 
  z-index : 1;
  position: fixed; 
  top: 20px; 
  left: 20px; 
  }
  
  div#one { background:#f00; }
  div#two { background:#0f0; }
  div#three { background:#00f; }
  
  
  form {
      border: thick solid #1D4600;
          height: 500px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form&gt;
      &lt;div id="one" style="display:inline !important"&gt;
  &lt;input type="text" name="textfield" id="textfield" /&gt;
  &lt;img src="test.gif" width="95" height="72" class="nextlink"&gt;&lt;/div&gt;
  
      &lt;div id="two"&gt;&lt;a href="#"&gt;link2&lt;/a&gt;
  &lt;img src="test.gif" width="95" height="72" class="nextlink"&gt;
  &lt;input type="text" name="textfield" id="textfield" /&gt;
  &lt;/div&gt;
  
      &lt;div id="three"&gt;Other text&lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
    $("img.nextlink").click(function(event) {
    $("div:hidden:first").fadeIn("slow");
   });
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>