Question

I want to carry a value inside a JavaScript function but use jQuery to detect the click or hover state.

function foo(bar){
 var choc=bar;
}

When I click foo() I want it detect the first click and the second so I can do an image swap.

Example:

function foo(bar) {
    var choc=id;    
    $(id).click(function () {
        alert('first click');
    }, function () {
        alert('second click');
    }); 
}

I can only return first click. This is what I am trying to do:

An example which will not work

<a href="javascript:open(5);" class="open">open <img id="5" class="swap5" src="down.png" /></a> 
<div id="box5">press the up button to close me</div>

jQuery

$(document).ready(function() {
        $(".open").click(function(event){
              var id = event.target.id;
              $('#box' + id).slideToggle();
              $(".swap"+id).attr("src", "up.png");
        }, function () {
                var id = event.target.id;
                $('#box' + id).slideToggle();
                $(".swap"+id).attr("src", "down.png");
        });
    });

Answer 1

Use .toggle instead of .click.

$(document).ready(function() {
    $(".open").toggle(function(event){
          event.preventDefault();
          var id = event.target.id;
          $('#box' + id).slideToggle();
          $(".swap"+id).attr("src", "up.png");
    }, function (event) {
          event.preventDefault();
          var id = event.target.id;
          $('#box' + id).slideToggle();
          $(".swap"+id).attr("src", "down.png");
    });
});

Also lose the href="javascript:open(5);" in the <a> tag. Use href="#" instead.