Question

I have the following link:

    <a id="readmore" href="#">READ MORE</a>

When the user clicks on this hyperlink, I am using Jquery to toggle the content below this link to show/hide content. One issue that I have with the href=”#” is that it brings the user to the top of the page. Instead I would like it stay at the same location, so that I can show the toggle effect of the info below the READ MORE hyperlink. Is there a solution that will work and is safe for most browers. I tried href=”” but that did not do the trick.

I tried also

    <a id="readmore"href="javascript:void(0)"> READ MORE</a>

but was not sure if this is the best practice.

Answer 1

You can use

$('#readmore').click(function(e) {
  e.preventDefault();
});

preventDefault() stops the default behaviour of the element so in this case, it’ll stop the screen jumping.

Read more about it here