Одушевленная высота переключения от 0 до авто или 100% ⇐ Html

[Anonymous]

Пожалуйста, помогите, я хочу, чтобы кнопки переключения показали только и скрывали абзацы, но другое содержимое внутри Div всегда остается видимым. Кроме того, CSS такой же, и я пытаюсь сгладить переход высоты DIV, когда показывают и скрывают параграфы < /p>


const toggleButtons = document.querySelectorAll('.toggleButton');
const divs = document.querySelectorAll('div');
const paragraphs = document.querySelectorAll('.paragraph');

toggleButtons.forEach((button, index) => {
button.addEventListener('click', () => {
const paragraph = paragraphs[index];
paragraph.classList.toggle('hidden');
paragraph.classList.toggle('visible');

if (paragraph.classList.contains('visible')) {
divs[index].style.height = paragraph.scrollHeight + 'px';
} else {
divs[index].style.height = '0';
}
});
});< /code>

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

div {
height: 0;
overflow: hidden;
transition: height 0.5s;
background: blue;
}

.paragraph {
opacity: 0;
transition: opacity 0.5s;
}

.visible {
opacity: 1;
display: block;
}

.hidden {
opacity: 0;
display: none;
}< /code>
Toggle 1
 HI
Paragraph 1.

Toggle 2
Hi
Paragraph 2.

Toggle 3
Hi
Paragraph 3.

Подробнее здесь: https://stackoverflow.com/questions/766 ... uto-or-100