Estoy adaptando un acordeón Bootstrap y tratando de mover el acordeón abierto en el que se hizo clic a la parte superior de la pantalla.

estoy usando esta solucion

Cuando hago clic en un acordeón y otro está abierto arriba, el que hizo clic se mueve fuera de la pantalla y luego vuelve a entrar. Entiendo que esto se debe a que el primer acordeón abierto se cierra y el nuevo acordeón en el que se hizo clic se mueve a ese lugar antes de que sea empujado hacia la parte superior de la pantalla.

Está en todas las soluciones en la publicación que he vinculado. ¿Hay alguna manera de hacer clic en un acordeón y que permanezca en la parte superior de la pantalla, incluso cuando el contenido anterior se cierra?

Aquí se muestra el mismo problema: fragmento JSFiddle
haga clic en el elemento 2, desplácese hacia abajo, haga clic en el elemento 3 y el elemento 3 se sale de la pantalla y se recupera. Sería mucho mejor si se quedara en la cima.

Con poco texto está bien, pero no se ve tan bien si hay mucho contenido en los acordeones.

 $('.panel-collapse').on('show.bs.collapse', function(e) { var $panel = $(this).closest('.panel'); var $open = $(this).closest('.panel-group').find('.panel-collapse.in'); var headerHeight = $('.menu-container').outerHeight(); var additionalOffset = 0; if($panel.prevAll().filter($open.closest('.panel')).length !== 0) { additionalOffset = $open.height(); } $('html,body').animate({ scrollTop: $panel.offset().top - additionalOffset - headerHeight }, 500); });