sending variables to a JQuery function

Question

I'm a novice in jQuery, but I hope somebody will be able to help me out. I have searched this forum (and others) but haven't been able to find an answer that I could make work.

I have a link like this:

<a href="#">

and a jQuery script:

$("div.show_dialogbox").click(function(){
    $("div#dialogboxwraper").animate({
        height: "400px"
    }, "slow")
    .animate({
        height: "200px"
    }, "slow");
});

I would like to be able to send a variable with the link and use it in the script for the height like this:

<a href="#" OnClick="variable(200)">


$("div.show_dialogbox").click(function(variable){
    $("div#dialogboxwraper").animate({
        height: variable+200+"px"
    }, "slow")
    .animate({
        height: variable+"px"
    }, "slow");
});

Answer 1

I would use data attributes here, for which more support was added in jQuery 1.4.3, like this:

<a href="#" class="show_dialogbox" data-height="200">

Then in jQuery:

$("a.show_dialogbox").click(function(){
  $("#dialogboxwraper").animate({
    height: $(this).data('height') + 200
  }, "slow")
  .animate({
    height: $(this).data('height')
  }, "slow");
});

You can test it out here.

Answer 2

Not sure about explicity sending a variable but you could set the title of the anchor to be "200px" and then inside of your function do something like

var h = $(this).attr('title');