Show each div step by step

Question

i am trying to make this script to show my div step by step. The current code will only show all the div on click. How do i make it detect the div and show step by step.Ex:1st click => expand div for step 1 , 2nd clikc => expand div for step2. After that if the div is all expanded , when the button is clicked then hide all the div.

TQ

<div id="stepshow">
  <h3>Step 1</h3>
</div>
<div id="stepshow">
  <h3>Step 2</h3>
</div>

<button id="stepbtn"></button>

<script>
  var qqcounter = 1;
  var maxstep = 3;
  $("#stepbtn").text("Show step " + qqcounter);
  $("#stepshow").hide();

  $("#stepbtn").click(function(){
    qqcounter++;
    if(qqcounter < maxstep)
    {
      $("#stepbtn").text("Show step " + qqcounter);
      $("#stepshow").slideDown();
    }
    else
    {
      $("#stepbtn").text("Hide step");
    }
  }); 
</script>

Answer 1

Here is an example of how to show/hide:

http://jsfiddle.net/rVwkn/14/

jQuery:

$('#stepbtn').click( function() {  
  if ($('#step2').is(':visible')) {
      $('#step3').show();
      $('#stepbtn').hide();
  } else if ($('#step1').is(':visible')) {
      $('#step2').show();
  }
});

$('#backbtn').click( function() {  
  if ($('#step3').is(':visible')) {
      $('#step3').hide();
      $('#stepbtn').show();
  } else if ($('#step1').is(':visible')) {
      $('#step1').hide();
  }
});   

CSS:

    #step2 {
        display:none;
    }
    #step3 {
        display:none;
    }
    #backbtn { display: none }    

HTML:

    <div id="step1">
      <h3>Step 1</h3>
    </div>
    <div id="step2">
      <h3>Step 2</h3>
    </div>
    <div id="step3">
      <h3>Step 3</h3>
    </div>

    <button id="stepbtn">Next Step</button>
    <button id="backbtn">Go Back a Step</button>

UPDATE:

Here is another version as well, which gives you more flexibility:

http://jsfiddle.net/ddr6D/6/

jQuery:

            $(document).ready( function() {
                var current_step = 1;
                var max_number_of_steps = 6;
               $('#stepbtn').click( function() {  
                  var next_step = current_step + 1;
                  $('#step'+next_step).slideDown();
                  $('#backbtn').show();
                  current_step++; // increase the step we are on...
                  if (current_step == max_number_of_steps) {
                    $('#stepbtn').hide();
                  }
               });

               $('#backbtn').click( function() {  
                  $('#step'+current_step).slideUp();// hide it first,
                  current_step--; // now update, so we know the correct step we are on
                  if (current_step == 1) {
                    $('#backbtn').hide();
                  }
                   if (current_step < max_number_of_steps) {
                       $('#stepbtn').show(); // show, if its been hidden...
                   }
               }); 

            });

CSS:

            #step2,#step3,#step4,#step5,#step6 {
                display:none;
            }
            #backbtn { display: none }

HTML:

            <div id="step1">
              <h3>Step 1</h3>
            </div>
            <div id="step2">
              <h3>Step 2</h3>
            </div>
            <div id="step3">
              <h3>Step 3</h3>
            </div>
            <div id="step4">
              <h3>Step 4</h3>
            </div>
            <div id="step5">
              <h3>Step 5</h3>
            </div>
            <div id="step6">
              <h3>Step 6</h3>
            </div>

            <button id="stepbtn">Next Step</button>
            <button id="backbtn">Go Back a Step</button>

Answer 2

html

<div id="stepshow1" class="stepshow">
            <h3>Step 1</h3>
        </div>
  <div id="stepshow2" class="stepshow">
            <h3>Step 2</h3>
        </div>
  <div id="stepshow3" class="stepshow">
            <h3>Step 3</h3>
        </div>

        <input type="button" id="stepbtn" />

script

var qqcounter = 0;
var maxstep = 4;
$("#stepbtn").text("Show step " + qqcounter);
$(".stepshow").hide();
$("#stepbtn").attr('value', 'Show step' + (qqcounter+1));
$("#stepbtn").click(function () {
    console.log(qqcounter);
    qqcounter++;
    if (qqcounter < maxstep) {
        $("#stepbtn").attr('value', 'Show step' + (qqcounter + 1));
        $('#stepshow' + qqcounter).slideDown();
    }
    else {
        $("#stepbtn").attr('value', 'Hide step');
        $(".stepshow").hide();
        qqcounter = 0;
    }
});

Answer 3

It won't work, cause you have the same ids "stepshow" you should change it for smth like "stepshow_1" for example:

$('btn').click(function(){

    $('#stepshow_'+counter).show();
    counter++;

});

Here is fiddle http://jsfiddle.net/uD3W2/2/