Me enfrento a un problema, donde he creado acordeones/elementos de preguntas frecuentes que puede alternar (abrir y cerrar) y cambiar a otro y cerrar el anterior que funciona bien. Pero el problema aquí es que si cambio el tamaño de mi navegador o cambio el modo de orientación a paisaje o retrato, la altura máxima no se vuelve a calcular.

Creé una función "accordionHeight" que funciona en Click pero no puedo pasar el "elemento" a esta función para volver a calcular fuera de mi evento de clic.

Porque la altura obviamente solo cambiará al hacer clic. Pero quiero que se vuelva a calcular al girar el "elemento__box" abierto actual, pero está fuera del alcance.

Tengo un ejemplo real en Codepen en lugar de código.

Mi JS:

 (() => { const accordion = document.querySelector('[bke-data="accordion"]'); if (!accordion) { return; } const items = accordion.querySelectorAll('.accordion__item'); const accordionHeight = (element, elementHeight) => { element.style.setProperty(`--max-height`, `${elementHeight}px`); }; const toggleAccordion = (item) => { const itemBox = item.querySelector('.accordion__box'); const itemBoxHeight = itemBox.scrollHeight; const openItems = accordion.querySelectorAll('.open'); const itemsLength = openItems.length; const currentItem = item; // itemBox.style.setProperty(`--max-height`, `${itemBoxHeight}px`); accordionHeight(itemBox, itemBoxHeight); if (itemsLength) { openItems.forEach((item) => { item !== currentItem && item.classList.remove('open'); }); } item.classList.toggle('open'); }; items.forEach((item) => { item.addEventListener('click', () => toggleAccordion(item)); }); window.addEventListener('resize', accordionHeight); })();

Codepen código completo + ejemplo: https://codepen.io/Merdzanovich/pen/MWvaryG