Question

I’m just trying to preform a very simple jQuery action.

I have two components: #safety and #safety-tab a, the #safety needs to be hidden on load. When the a link in the #safety-tab is clicked, it will hide itself and slideUp the #safety.

This sort of works, but the #safety box just flickers on click, doesn’t stay shown:

 $(document).ready(function() {
   $("#safety-tab a").click(function() {
     $(this).hide();
     $("#safety").removeClass("hide");  
   });
   });

While the markup is this:

     <div id="safety" class="hide group">
      ...
     </div><!--end #safety-->
    <div id="safety-tab">
      <a href="">...</a>
    </div><!--end #safety-tab-->

Any idea what I’m doing wrong?

Answer 1

Add return false; or event.preventDefault() to your click handler.

$(document).ready(function() {
   $("#safety-tab a").click(function( event ) {
     $(this).hide();
     $("#safety").removeClass("hide");  
     event.preventDefault();
   });
});

This prevents the default behavior of the <a> element, which is reloading the page.

• http://api.jquery.com/event.preventDefault

Using event.preventDefault() will preserve event bubbling which is sometimes needed.

Doing return false; will prevent the default behavior, but it will also halt the bubbling.