Estoy tratando de mostrar el resto de mi texto con una animación en la altura cuando haces clic en un botón, logré hacerlo, pero el problema es que no puedo encontrar la manera de hacerlo receptivo. Básicamente, muestro una altura: 30px y un desbordamiento: oculto.
Y enciendo una clase que contiene una altura: 300px, se ve bien en la versión móvil, pero si aumento la resolución de la página, la altura se volverá demasiado pequeña.
Pensé que podría haber una forma de adaptar la altura con el ancho de la pantalla, o tal vez hay otra forma de ocultar parte del texto.
A continuación se muestra el código:
SCSS:
.about__body{ @include displayFlex($direction: column, $align-item: center); gap: 20px; &-content { height: 60px; overflow: hidden; transition: all 400ms ease-in-out; } } .about__body-content-show { transition: all 400ms ease-in-out; height: auto; }JS:
let btnAbout = document.getElementById("btn--about") let contentAbout = document.querySelector(".about__body-content") const onClickShow = () => { btnAbout.addEventListener('click', (e) => { e.preventDefault() contentAbout.classList.toggle('about__body-content-show') }) } onClickShow()Básicamente, puede usar JS para lograr esto y hacer que su contenedor tenga la misma altura que su contenido
document.getElementById('expand').addEventListener('click', function() { document.querySelector('.content-holder').style.height = document.querySelector('.content').offsetHeight + 'px'; document.querySelector('.content-holder').classList.toggle('collapsed'); });un violín de trabajo: https://jsfiddle.net/sdjhetq1/