Jquery chaining hide/show fadein/fadeout

Question

this is my first post here so excuse me if I make some mistake. I'm also very new regarding jquery.

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.

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.

Any ideas about what's breaking it?

Here's the 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);
          });
        });
      });
    });
  });
});

<div id="form">

  <div class="register">
    <!--step1-->
    <div id="step1">
      <p>ARE YOU READY ?</p>
      <button id="btnsteps" type="submit">YES &raquo;</button></div>
    <!--end step 1-->

    <!--step 2-->
    <div id="step2" class="hidden">
      <p>ARE YOU WANT TO JOIN FOR FREE ?</p>
      <button type="submit" id="btnsteps2">YES &raquo;</button></div>
    <!--end step 2-->
    <!--step 3-->
    <div id="step3" class="hidden">
      <p>THEN YOU MUST KNOW</p>
      <button id="btnjoin" type="submit">Join me &raquo;</button></div>
    <!--end step 3-->

  </div>
  <!-- fin register-->



</div>
<!-- fin form-->

Answer 1

JS:

$(document).ready(function() {
  $("#step2").hide();
  $("#step3").hide();

  $("#btnsteps").click(function() {
    $("#step1").hide(1000, function() {
      $("#step2").show(1000, function() {});
    });

    $("#btnsteps2").click(function() {
      $("#step2").hide(1000, function() {
        $("#step3").show(1000);
      });
    });
  });
});

Is this what you want?