Аккордеон в стиле флага, который приводит к прыжкам с всей страницы при закрытии панелей ⇐ Javascript

[Anonymous]

Я работаю над аккордеоном в стиле флажков, который работает отлично, но Judders страниц при закрытии открытой панели. Я попытался добавить JavaScript для динамического расчета и установить высоту контента, когда аккордеон расширен, но это не сработало. Буду признателен за любое понимание этого вопроса. Должен ли я просто отказаться от стиля аккордеона? Любые предложения для аккордеона, который не делает оставшуюся часть контента страницы на закрывающей панели? Большое спасибо. < /P>

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function() {
const tabs = document.querySelectorAll('.tab input');

tabs.forEach(tab => {
tab.addEventListener('change', function() {
const content = this.nextElementSibling.nextElementSibling;
if (this.checked) {
content.style.maxHeight = content.scrollHeight + 'px';
} else {
content.style.maxHeight = 0;
}
});
});
});< /code>
.tab input {
position: absolute;
opacity: 0;
z-index: -1;
}

.tab_content_wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s;
}

.tab_content {
overflow: hidden;
}

.tab input:checked~.tab_content_wrapper {
grid-template-rows: 1fr;
}

.accordion {
overflow: hidden;
--theme: var(--secondary);
overflow: visible;
}< /code>





title here



lipsum content here






title here



lipsum content here

Подробнее здесь: https://stackoverflow.com/questions/794 ... ing-panels