JavaScript.toggle - does vertical scrollbar rise?

Question

I have this function:

$(document).ready(function() {
  $("#toggle-area").click(function() {
    $("#show-area").toggle(300);
  });
});

It displays text when the user clicks on the link. The problem is that I have 12 links, one below the other, and a vertical scrollbar appears. However, when I scroll down and click on the 12th link (for example), my scroll bar jumps to the top of the page, and I need to scroll down to the end to see the text that appears.

How to avoid this transition and save the list where it was before clicking?

Here is the link - JSFiddle

Thanks in advance.

Answer 1

preventDefault, .
, # .

$(document).ready(function() {
$("#toggle-area").click(function(e) {
    $("#show-area").toggle(300);
    e.preventDefault();
  });
});