CODEWITHSUNDEEP
jquerycss
ipixel
ipixel

Reputation: 529

Why is my toggle failing

I've done this countless times, and i swear it's just messing with me.

Using any jquery library.

All i'm trying to do is toggle a div via link.

<a href="" id="mGoldNav">Click Me</a>

and this is my jquery code

$('#mGoldNav').click(function(){
    $('#module-golden-nav').toggle("slow");
});

On my site, basically NOTHING happens. I placed an alert() and that fires off, so the click() works. But the toggle fails.

But on http://jsfiddle.net/BaQd2/1/ you'll notice that it works once, but dissapears and if you RUN once more, it give me an odd error : {"error": "Please use POST request"}

Any ideas why it's messing with me?

Thanks!

Upvotes: 0

Views: 79

Answers (5)

Fredrick Gauss
Fredrick Gauss

Reputation: 5166

a elements are actually bad idea to use them as buttons. But in your definition href attribute does the unwanted action, post back. if you change it like # (or javascript:void(0)) you will get what you want:

<a href="#" ..

here.

Upvotes: 1

E.J. Brennan
E.J. Brennan

Reputation: 46859

Try this instead:

$('#mGoldNav').click(function(e){
    e.preventDefault();
    $('#module-golden-nav').toggle("slow");
});

Upvotes: 0

Pevara
Pevara

Reputation: 14310

You could also just put something in your href attribute on your link, like a #. http://jsfiddle.net/BaQd2/2/

Upvotes: 1

writeToBhuwan
writeToBhuwan

Reputation: 3281

As it is an anchor tag, it will trigger its default postback action.. To use toggle you have to use 

return false;

like this:

$('#mGoldNav').click(function(){
     $('#module-golden-nav').toggle("slow");
     return false;
});

Upvotes: 1

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

Return false at the end of the click-callback to prevent the browsers default behavior of following a clicked anchor.

This should work:

$('#mGoldNav').click(function(){
    $('#module-golden-nav').toggle("slow");
    return false;
});

DEMO

Upvotes: 1

Related Questions