I'm adapting a Bootstrap accordion and trying to move the clicked open accordion to the top of the screen.

I am using this solution

When I click on an accordion and another one is open above the clicked one moves out of the screen and then back into it. I do understand that this is because the first open accordion gets closed and the new clicked one moves into that place before it gets pushed down to the top of the screen.

It's in all the solutions on the post I've linked. Is there a way to click on an accordion and it just stays on top of the screen, even when the content before it is closed?

Here is the same problem shown: JSFiddle snippet
click on item 2, scroll down, click on item 3 and item 3 goes off screen and bounces back. It would be so much nicer if it just stayed on top.

With little text it's fine but it looks not that good if there is loads of content in the accordions.

$('.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);
      });