Анимировать высоту переключения от 0 до авто или 100%. ⇐ CSS

[Anonymous]

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

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

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

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

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;
}

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

Toggle 1
 HI
Paragraph 1.

Toggle 2
Hi
Paragraph 2.

Toggle 3
Hi
Paragraph 3.

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