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

Программисты Html
Ответить
Anonymous
 Аккордеон в стиле флага, который приводит к прыжкам с всей страницы при закрытии панелей

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»