Click event function -- separate clicks

Question

http://jsfiddle.net/3eMGR/16/

I'm trying to make it so that on the first click it shows row 2 and then on the second click is shows row 3.

How do i make two separate events?

Thanks for everyone's help!

Answer 1

It has to be the same click handler, but you can use a variable to keep track of the click count.

var clickTarget = 2;
$("button").click(function () {
  var selector = "." + clickTarget.toString();
  $(selector).css("display","inherit");
  $(selector).show();
  clickTarget++;        
});

Demo

Answer 2

Something like this would work:

$("button").click(function () {
  $(".2").show();
  $('button').unbind('click').click(function(){
    $('.3').show();
  });
});

However, a better way of doing what you want is to actually add divs dynamically when you want to add a row. This is illustrated here.

(I'm assuming you actually want to add a row, as per the button's text.)

Also, stop using the id attribute for more than one element. The id is supposed to be unique. Use the class attribute for styling sets of elements.

Answer 3

Your class names are invalid, by the way. They must start with a - or a letter. I suggest you fix them.

Anyways, you can just remove the class of each .hidden element, one-by-one:

$(document).ready(function() {
    $("button").click(function() {
        $(".hidden").first().removeClass('hidden');
    });
});​

Demo: http://jsfiddle.net/Blender/3eMGR/20/

Answer 4

Please check thi fiddle This will dynamically keep on adding the rows as much as you want.

$('button').on('click', function() {
                $row = $('div.row:first').clone();
                $('div.wraper').append($row);
            });