ansaurus

Question

jQuery show/hide/toggle works, but doesn't stay as it should - it reverts to original state

Answer 1

+1 A:

Well, when you click the link, the onClick event is triggered, and just after that, the page is reloaded, because the link points to the same page (href=""), and the browser follows the link.

When the page is reloaded, it reverts to its original state, hiding the answer.

To avoid this, you need to return false on the function triggered by the click event, so the browser won't follow the link.

To sum up, make your code look like this :

$('#question').click(function(){
    $('div.showhide,#answer').toggle();
      return false;
   });

Alternatively, you can make your link point to a javascript function. You would then remove the code above, replacing it with a standard javascript function :

function showAnswer()
{
    $('div.showhide,#answer').toggle();
}

and your link would become:

<a id="question" href="javascript:showAnswer();">

But keep in mind this is not recommended, as a client with javascript disabled will not be able to see the answers. You should always have a page working without javascript, and then add javascript to make it more usable.

FWH 2009-07-16 07:56:30

`href="javascript:..."` You're kidding, right?

peirix 2009-07-16 08:13:46

My goal was to show the different ways to do it - but you're right, I added a warning about that.

FWH 2009-07-16 08:56:50

Answer 2

A:

What happens if you replace $('div.showhide,#answer').hide() with $('div.showhide,#answer').toggle();

Or even better, if you can, don't hide div in document.ready, instead use css display:none

usoban 2009-07-16 07:58:50

Answer 3

+1 A:

I think there might be a problem with <a href="">... If you remove the href attribute (as it isn't needed anyway (if you want the appropriate cursor, use CSS)), it will work, at least it did for me.

peirix 2009-07-16 07:59:12

Answer 4

+2 A:

Another way of preventing the default following behaviour of a hyperlink is to use event.preventDefault():

Prevents the browser from executing the default action.

I would suggest this:

$('#question').click(function(e){
    e.preventDefault();
    $('div.showhide,#answer').toggle()
});

karim79 2009-07-16 08:03:35

ansaurus

tags:

views:

answers:

jQuery show/hide/toggle works, but doesn't stay as it should - it reverts to original state

related questions