jQuery toggle running twice

Question

It seems that this code:

$(function(){
    $('.show_hide_login').toggle(
    function (){
            alert('show');
            $("div#fullpage").show();
            $("div#loginbox").show();
        },
  function (){
            alert('hide');
            $("div#loginbox").hide();
            $("div#fullpage").hide();
        }
  ); });

Any idea on why it would be running twice when I click on either link (two, one is a div and one is an anchor)?

Answer 1

How many elements do you have with the .show_hide_login class? I'll guess you have two of those. In which case, $('.show_hide_login') result contains two elements, and toggle() is executed for each of them.

Answer 2

This isn't an answer to your question, but you could clean up your code a bit like so:

$(function() {
    $('.show_hide_login').toggle(
    function() {
        alert('show');
        $("#loginbox,#fullpage").show();
    }, function() {
        alert('hide');
        $("#loginbox,#fullpage").hide();
    });
});

As to your actual problem, I suspect Nick's guessed the culprit. Check out this demo to see the result of binding the same event twice: http://jsfiddle.net/9jPLv/

In addition to adding an alert prior to the binding of the toggle event, you could add in an unbind() and see if that solves the problem, like so:

$('.show_hide_login').unbind().toggle(

If that solves it, the toggle binding is definitely being run twice, so you'd just have to figure out why.