slidetoggle, goes to top of page after selecting link

Question

I have a div slide down when you click the link

<a href="#" id="related-courses">Related Courses</a>

<div id="related-courses-section">
 <p>Content</p>
</div>

$('#related-courses').click(function() {
 $("#related-courses-section").slideToggle(100);
});

CSS set to display:none; for #related-courses-section (to hide it by default)

It will display the div w/ the content within it, but it brings me to the top of the page after clicking the link, why would it do that?

Answer 1

Try adding return false; to your click function, like so:

$('#related-courses').click(function() {
 $("#related-courses-section").slideToggle(100);
 return false;
});

This will prevent the default link click behavior of navigating to the link url.

Answer 2

preventDefault() is a more flexible approach - it's functionally the same as return false, but can be placed at the beginning of the function and doesn't preclude 'return'ing a value for some other reason.

$('#related-courses').click(function(e) {
  e.preventDefault();
  $("#related-courses-section").slideToggle(100);
});