Expand/Collapse brings page to top

Question

If element is expanded or collapsed whenever you are scrolled down the page, the page is abruptly reset and focus is moved to the top of the page.

Any way to prevent the page from shifting or make this less abrupt?

    $(document).ready(function () {
        $(".flip").click(function () {
        var panel = $(this).next('.panel');
        $('.panel').not(panel).slideUp('slow');
        $(this).next('.panel').slideToggle("slow");
       });
    });

http://jsfiddle.net/chaddly/5FNTX/

Answer 1

Try This add "e.preventDefault();"

$(document).ready(function () {
    $(".flip").click(function (e) {
        e.preventDefault();
        var panel = $(this).next('.panel');
        $('.panel').not(panel).slideUp('slow');
        $(this).next('.panel').slideToggle("slow");
    });
});

Answer 2

Because the element you are clicking on contains a link with # it is navigating to that which is causing it to move to the top of the page.

Add a call to preventDefault() will stop this:

$(".flip").click(function (e) {
     e.preventDefault();
     var panel = $(this).next('.panel');
     $('.panel').not(panel).slideUp('slow');
     $(this).next('.panel').slideToggle("slow");
});

http://jsfiddle.net/5FNTX/1/

Answer 3

you can put return false after last toggle.

$(document).ready(function () {
 $(".flip").click(function () {
  var panel = $(this).next('.panel');
  $('.panel').not(panel).slideUp('slow');
  $(this).next('.panel').slideToggle("slow");
  return false;
 });
});