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-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.

score 1 · Answer 1 · answered Jun 03 '11 at 20:31

1

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");
  });
});

answered Jun 03 '11 at 20:31

Matthew Nessworthy

1,428
10
19

Hi DevMatt. Thanks, but it's still not working. Not sure why I've tried JQuery 1.6.1 as well, same issue. – ObiHill Jun 03 '11 at 20:42
Please provide your HTML structure or a jsfiddle.net example. – Matthew Nessworthy Jun 03 '11 at 20:43
http://jsfiddle.net/bBXhD/. It's working on jsfiddle but it's not working in my page. Here are my script tags (Do you know any scripts that interfere with JQuery): – ObiHill Jun 03 '11 at 20:59

score 1 · Answer 2 · answered Jun 03 '11 at 20:31

1

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.

answered Jun 03 '11 at 20:31

Code Maverick

20,171
12
62
114

Hi Scott. Thanks for the clean code recommendations. I did the elem_core declaration because I needed to use it inside toggle() earlier. I'm still having issues with this though, still not working. – ObiHill Jun 03 '11 at 20:44
Oh ok ... I didn't see `elem_core` _inside_ the `toggle()` in your post, but _after_. I see in your posted answer that you got it working though, so good for you! =D – Code Maverick Jun 03 '11 at 22:10
Yeah, I did the elem_core thing previously (not in my post). I took it out when I was trying to 'reduce' the code so I could find out what the problem was. Thanks. – ObiHill Jun 04 '11 at 13:44

ObiHill · Accepted Answer · 2011-06-06T14:41:31.457

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.

score 0 · Answer 4 · answered Jun 03 '11 at 20:26

0

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

answered Jun 03 '11 at 20:26

Vap0r

2,588
3
22
35

score 0 · Answer 5 · answered Jun 03 '11 at 20:26

0

Why you are using toggle hide and show together

only toggle is needed

check this

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

answered Jun 03 '11 at 20:26

zod

12,092
24
70
106

JQuery Toggle not working as it should

5 Answers5

Linked