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

I am try to show/hide answers to FAQ questions using jQuery. The idea is that all the questions are listed and only when a user wants to see the answer they click the question (which looks like a link) and then the answer becomes visible.

It kind of works except that the answer reverts to its original state as soon as it is clicked. In this case that means when I click the question to show the answer, it shows up and then disappears in the next instant rather than staying visible till it is clicked again to toggle it to hide.

I have pasted the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js" ></script>
<script>
    $(document).ready(function() {
        $('div.showhide,#answer').hide();
        $('#question').click(function(){
        $('div.showhide,#answer').toggle();
       });
  });
</script>
</head>
<body>
<p><a href="" id="question" name="question">Question</a></p><div id="answer"     name="answer">Answer</div></p>
</body>
</html>

peirix

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.

As <a href=""> triggers an onClick event and refreshes the page, you can replace the blank href attribute with href="#" or href="javascript:void(0) to run the js event.

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

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.

usoban

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

来源：https://stackoverflow.com/questions/1136046/jquery-show-hide-toggle-works-but-doesnt-stay-as-it-should-it-reverts-to-ori

标签

jquery

toggle

show-hide