Acabei de criar outra solução para isso, onde não é mais necessário usar um valor muito alto a muito alto. Ele precisa de algumas linhas de código javascript para calcular a altura interna do DIV recolhido, mas depois disso, é tudo CSS.
1) Buscando e ajustando a altura
Busque a altura interna do elemento recolhido (usando scrollHeight
). Meu elemento tem uma classe .section__accordeon__content
e na verdade eu executo isso em um forEach()
loop para definir a altura de todos os painéis, mas você entendeu.
document.querySelectorAll( '.section__accordeon__content' ).style.cssText = "--accordeon-height: " + accordeonPanel.scrollHeight + "px";
2) Use a variável CSS para expandir o item ativo
Em seguida, use a variável CSS para definir o max-height
valor quando o item tiver uma .active
classe.
.section__accordeon__content.active {
max-height: var(--accordeon-height);
}
Exemplo final
Portanto, o exemplo completo é o seguinte: primeiro faça um loop em todos os painéis do acordeão e armazene seus scrollHeight
valores como variáveis CSS. Em seguida, use a variável CSS como o max-height
valor no estado ativo / expandido / aberto do elemento.
Javascript:
document.querySelectorAll( '.section__accordeon__content' ).forEach(
function( accordeonPanel ) {
accordeonPanel.style.cssText = "--accordeon-height: " + accordeonPanel.scrollHeight + "px";
}
);
CSS:
.section__accordeon__content {
max-height: 0px;
overflow: hidden;
transition: all 425ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.section__accordeon__content.active {
max-height: var(--accordeon-height);
}
E aí está. Uma animação de altura máxima adaptável usando apenas CSS e algumas linhas de código JavaScript (não é necessário jQuery).
Espero que isso ajude alguém no futuro (ou meu futuro eu para referência).
.scrollHeight
função DOM não funcionará no IE <8.0 ( developer.mozilla.org/en/DOM/element.scrollHeight )