JQuery Toggle not working as it should

Question

I have a problem with JQuery Toggle.

I have the following code:

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

$_(\"#sh-zone-buttons\").delegate(\"#sh-         


        

Answer 1

Why you are using toggle hide and show together

only toggle is needed

check this

http://api.jquery.com/toggle/

Answer 2

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.

Answer 3

With your current code you are hiding #sh-zone-login-menu and then in your callback method making it visible again.
Also, var $_ = jQuery.noConflict(); is the prefered way to assign jQuery's $ to a variable

var $_ = jQuery.noConflict();

$_(document).ready(function(){

  $_("#sh-zone-buttons").delegate("#sh-zone-button-login-menu", "click", function(event) {
    event.stopPropagation();
    event.preventDefault();

    $_("#sh-zone-login-menu").toggle();
    $_(this).toggleClass("current");
  });
});

Answer 4

I've simplified it to:

var $_ = jQuery;

$_(document).ready(function() {

    $_("#sh-zone-buttons")
        .delegate("#sh-zone-button-login-menu", "click", function(event) {

        $_("#sh-zone-login-menu").toggle();
        $_(this).toggleClass("current");       
        return false;

    });

});

You don't need to define var elem_core if you are only going to use it once, so simply use $_(this).toggleClass("current");

You don't need all that hide/show mess, simply use toggle(), as that's what it does for you.

You don't need event.stopPropagation() and event.preventDefault(), simply do return false, as that does both.

Answer 5

I'd imagine the solution would be to add a .delegate() to that too.