Question

I have a problem with JQuery Toggle.

I have the following code:

var $_ = jQuery;
$_(document).ready(function(){

$_("#sh-zone-buttons").delegate("#sh-zone-button-login-menu", "click", function(event)
{
    event.stopPropagation();
    event.preventDefault();
    var elem_core = $_(this);
    $_("#sh-zone-login-menu").toggle(0, function(){

        if($_(this).is(":visible"))
        {
            $_(this).hide();
            console.log("#sh-zone-login-menu: HIDE");
        }
        else if(!($_(this).is(":visible")))
        {
            $_(this).show();
            console.log("#sh-zone-login-menu: SHOW");
        }           

    });
    elem_core.toggleClass("current");       

});

});

I’m using the script to show and hide a DIV. However, toggle() doesn’t seem to work at all and I don’t know why. What happens is that it only shows the content, and never hides. I’ve also tried it with just the toggle() function but it gives me the same result.

I’m using Firefox 4 with JQuery 1.5.2.

I’d appreciate any assistance to resolve this.

Answer 1

I seem to have figured this one out, but it spooks the daylight out of me.

Here the HTML code for the DIV I wanted to toggle:

<div id="sh-zone-login-menu" class="sh-zone-button-link-menu-container">
<fieldset>
    <form action="#" method="post" enctype="multipart/form-data">
        <p>
        <label for="email">Username or Email</label>
        <input type="text" name="email" maxlength="255" value="" />
        </p>
        <p>
            <label for="email">Password</label>
            <input type="password" name="password" maxlength="20" value="" />
        </p>
        <p class="remember">
            <input type="submit" value="Sign in" />
            <input type="checkbox" name="remember" value="1" />
            <label for="remember">Remember me</label>
        </p>
        <p>
            <a href="#">Forgot your password?</a>
        </p>
        </form>
</fieldset>
</div>

Using this code above, the toggle doesn’t work.

But when I take out the fieldset tags, the toggle works. For the life of me I can’t explain why this is working, but not the code above.

I’ve disabled all my script tags except the one for jQuery, and all my javascript code except the one to toggle and I still get the same phenomenon.

However, in jsFiddle (http://jsfiddle.net/bBXhD/2/), I don’t see the issue. Has anyone come across anything like this?

Anyway, thanks all for the responses.

---

Additional Note: 06-06-2011 15:41

Just in case someone runs into a similar issue later, I just thought I’d document my recent finding on this. The problem was from the CSS and HTML. Although the fieldset tag was not the problem, it was removed as I believe it’s not even semantically accurate to encapsulate a form with this tag.

The problem was from the container div i.e. class=”sh-zone-button-link-menu-container”. This container was specifically positioned as absolute in CSS. In addition, the form was also positioned as absolute in CSS. When this happens, JQuery toggle() will not work, I’m not sure why this is. What I did to resolve this was remove the position declaration from the CSS for the form tag.

You can have a look at both examples on JSFiddle here:

a. Not working JQuery toggle (http://jsfiddle.net/bBXhD/4/)

b. Working JQuery toggle (http://jsfiddle.net/bBXhD/5/)

Cheers.