Question

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".comment").click(function(){
     $(".commentForm").slideToggle("slow");
  });
});
</script>
</head>

this script above will slide in a from but then somehow the browser refresh again and bring it back to original mode where user can see the form instead of staying with the form hided or slided in.

I have tried in two browser Chrome and Mozzilla in Chrome the refresh back is faster than firefox.

why is that happening is the jquery.js causing this ?

Answer 1

Make sure you cancel the default action of the link by returning false from the click event handler:

$('.comment').click(function() {
    $('.commentForm').slideToggle('slow');
    return false;
});

or:

$('.comment').click(function(e) {
    $('.commentForm').slideToggle('slow');
    e.preventDefault();
});

If this .comment selector represents a <form> or an anchor and you don’t prevent the default action the browser will simply redirect and the javascript might not have time to execute.