jquery hide method only hides div for a second but then div reappears automatically

Question

Hey all,

I seem to have same issue as the one I posted before. I want to hide all the divs that are there by default and only display one. Then the user can click on a side tab to display another. Problem is the divs are only hidden for a second after page loads but reappear soon after. This is code that's suppose to hide the divs of the page and only display the div with id of "pple":

$("a#link2").click(function(){$("#content > div").hide(); $("#pple").show();});

markup:

   home.html:                                           
<li><a href="about.html" id="link2">About</a></li>

about.html:
<div id="content">
 <div class="tabContent" id="pple">
<p>
    Content
<p> 
   </div>

    <div class="tabContent" id="serv">

<p>
    Content
</p>    
  </div>

  <div class="tabContent" id="sol">     

<p>
    Content
</p>    
  </div>            
</div>

Thanks for any response.

Answer 1

You need to return false; on your handler for the <a> element.

This is because the default behavior of the <a> element is occurring and reloading the page, so you need to disable that behavior.

$("a#link2").click(function(){
    $("#content > div").hide(); 
    $("#pple").show();
    return false;  // Will prevent default behavior
                   //   but it also prevents event bubbling
});

Alternatively, you could call event.preventDefault()

$("a#link2").click(function( event ){
    event.preventDefault();  // Prevents the default behavior
                             //    and event bubbling is still intact
    $("#content > div").hide(); 
    $("#pple").show();
});

http://api.jquery.com/event.preventdefault/