Question

Im using this code to show/hide a div:

<a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv">
My content...... <a href="#" class="show_hide">hide</a></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"  type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});

</script>

The problem is my div is at the bottom of the page. So when user clicks the link to show the div, the browser goes back to the top of the page and the user then has to scroll down to see the displayed div. What can i do to make to browser stay near bottom of page where the div is now showing?

Answer 1

The following should be what you are looking for:

$('.show_hide').click(function(e){
   e.preventDefault();
   $(".slidingDiv").slideToggle();
   return false;
});