title: Jquery chaining hide/show fadein/fadeout
body: <p>this is my first post here so excuse me if I make some mistake. I'm also very new regarding jquery.</p>
  
  <p>So, I've been battling with this jquery code, what I want to do is that each div="step" shows or hides, or fades in or fades out after pressing the buttons.</p>
  
  <p>I've tried chaining the jquery after pressing a button, one div hides and right afterwards the next div shows. I've read a lot regarding this issue and I don't think im making any mistakes and yet it's not working.</p>
  
  <p>Any ideas about what's breaking it?</p>
  
  <p>Here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#btnsteps').click(function() {
      $('#step1').hide(1000, function() {
        $("#step2").show(1000, function() {
          $('#btnsteps2').click(function() {
            $('#step2').hide(1000, function() {
              $("#step3").show(1000);
            });
          });
        });
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="form"&gt;
  
    &lt;div class="register"&gt;
      &lt;!--step1--&gt;
      &lt;div id="step1"&gt;
        &lt;p&gt;ARE YOU READY ?&lt;/p&gt;
        &lt;button id="btnsteps" type="submit"&gt;YES &amp;raquo;&lt;/button&gt;&lt;/div&gt;
      &lt;!--end step 1--&gt;
  
      &lt;!--step 2--&gt;
      &lt;div id="step2" class="hidden"&gt;
        &lt;p&gt;ARE YOU WANT TO JOIN FOR FREE ?&lt;/p&gt;
        &lt;button type="submit" id="btnsteps2"&gt;YES &amp;raquo;&lt;/button&gt;&lt;/div&gt;
      &lt;!--end step 2--&gt;
      &lt;!--step 3--&gt;
      &lt;div id="step3" class="hidden"&gt;
        &lt;p&gt;THEN YOU MUST KNOW&lt;/p&gt;
        &lt;button id="btnjoin" type="submit"&gt;Join me &amp;raquo;&lt;/button&gt;&lt;/div&gt;
      &lt;!--end step 3--&gt;
  
    &lt;/div&gt;
    &lt;!-- fin register--&gt;
  
  
  
  &lt;/div&gt;
  &lt;!-- fin form--&gt;</code></pre>
  </div>
  </div>
  </p>