Accordion gets out of focus when one of the accordion panel with larger content get closed

[Nit014]

We have three accordion panel, in second we have a larger content. When we open it the third accordion panel goes down due to larger content. We scroll down to third panel and opening it makes second panel collapse. Due to which the accordion component shifts upwards and we are left with bottom of the page. Is there any solution to it or anybody has faced the same issue ?

Sharing Link for demo purpose: https://jsfiddle.net/Nit014/yfu5dq3r/5/

[Edditoria]

I did have the same "issue" too. By default, Bootstrap will not shift the view for you. But I think it is not an issue at all because Bootstrap does the basic job only. However, it is quite common for years. There are already answer in StackOverflow:
https://stackoverflow.com/questions/10744299/scroll-back-to-the-top-of-scrollable-div

// jQuery is required in the old day
$('.panel-collapse').on('shown.bs.collapse', function (e) {
    var $panel = $(this).closest('.panel');
    $('html,body').animate({
        scrollTop: $panel.offset().top
    }, 500); 
});

The code in the your demo link is for Bootstrap v3.3.6. jQuery is required and that is good for v3 and v4. The above answer should solve your problem.

If you are using Bootstrap 5, you may want de-jQuery:

document.querySelectorAll(".accordion-collapse").forEach((elm) => {
	elm.addEventListener("shown.bs.collapse", (evt) => {
		let accItemElm = evt.target.closest(".accordion-item");
		accItemElm.scrollIntoView();
	});
});

Here is the updated demo for you: https://codepen.io/Edditoria/details/ExLXdrQ
(Sorry I don't have JSFiddle account. :)

You can customize the behaviour about scrollIntoView() (API) and add some conditions for scrolling.

Happy coding!

[PetersOtto]

Very helpfull for me! Thx!