CODEWITHSUNDEEP
jquery
sgerbhctim
sgerbhctim

Reputation: 3640

Click event function -- separate clicks

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!

Upvotes: 0

Views: 81

Answers (4)

Vinayak Phal
Vinayak Phal

Reputation: 8919

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);
            });

Upvotes: 0

Blender
Blender

Reputation: 298176

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/

Upvotes: 0

user684934
user684934

Reputation:

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.

Upvotes: 0

McGarnagle
McGarnagle

Reputation: 102753

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

Upvotes: 1

Related Questions