sending variables to a JQuery function

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="#" OnClic开发者_Go百科k="variable(200)">


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

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.

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

well make a function than;

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

///

function shoot (number) {

    $("div#dialogboxwraper").animate({
        height: number+200+"px"
    }, "slow")
    .animate({
        height: number+"px"
    }, "slow");


}

NOTE: You will have to add onclick="shoot(200);" on every that processes that

You could also use a plugin that animates to a certain class, this way you separate the display portion of your site from the data portion of your site. You'd create a CSS class for the "opened" state and another for the "closed" state, then use one of the plugins below to animate between them.

http://plugins.jquery.com/project/animate-to-class

jQuery UI, also extends the animate class so you can do this:

http://jqueryui.com/demos/switchClass/

Here's a demo, this uses jQuery UI:

http://jsbin.com/ijewu3

And the edit link:

http://jsbin.com/ijewu3/edit

Easiest way to do this would be to move the code that actually initiates the animation to a seperate function like so:

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

Then you would wireup your click event on your link like so:

$("div.show_dialogbox").bind("click", doSomeAwesomeAnimation(200));

Edit: one quick point your selector you are using to wireup the click event is targeting a div with a class of show_dialogbox not the link html element it presumably contains. Just wanted to make sure you knew that.

html tags can have rev="" and rel="" strings which can be parsable. You may also look into something like this: `...

This will set a tag parameter and then continue with whatever else is supposed to happen after clicking.

Thank you all for your help and inputs/ideers :-)

I ended up using vertazzar answer, because i found it to be the one suting me needs best (and beeing the easy

This is what i ended up with

The links:

<a href="#" OnClick="showdialogbox(350,'test1');" class="show_dialogbox">Dialog test 1</a><br /><a href="#" OnClick="showdialogbox(200,'test2');" class="show_dialogbox">Dialog test 2</a> 

and the function

    // SHOW DIALOG BOX
function showdialogbox (boxh, boxc) {
    if ($("div#dialogboxwrap").css("height") === "0px") {
            $("#dialogboxcontent").load("test1.html #"+boxc);
    }
    else {
        $("div#dialogboxwrap").animate({
            height: "0px"
            }, "slow",function(){
            $("#dialogboxcontent").load("test1.html #"+boxc);
        });
    }
    $('div#dialogboxcontent').css('height', boxh-80+"px");
    $("div#dialogboxwrap").animate({
        height: boxh+100+"px"
    }, "slow")
    .animate({
        height: boxh+"px"
    }, "slow");
}
// CLOSE DIALOG BOX
$(document).ready(function() {
   $("div#close_dialogbox").click(function(){
        $("div#dialogboxwrap").animate({
            height: "0px"
        }, "slow");
    });

the result can bee seen here (comments are velkome) http://www.gynther-klanen.dk/hr/

Now how do i close this question and can i somhow credit you here ???