Estoy tratando de escribir una lectura más. Funciona en su mayor parte, excepto que los Divs que se supone que están completamente cerrados, aún muestran la primera línea de texto.
Hice un codepen https://codepen.io/justinblayney/pen/JjpZeJK
Es un poco complicado, en la vista móvil, 5 divs deben ocultarse detrás de un interruptor de leer más, en la vista de escritorio siempre están visibles con un diseño completamente diferente para el que uso la cuadrícula css (por eso no los envuelvo en un div).
si ve mi enlace anterior, asegúrese de tener menos de 768 px que verá en la parte inferior
Lee mas
Compatibilidad de dispositivos
País disponible
Año Establecido
con licencia en
Apoyo
Solo debería mostrarse "Leer más", el resto debería abrirse en el interruptor, pero en su lugar se muestra el título (fuerte) y solo el contenido (intervalo) está oculto. Quiero tanto el título como el contenido ocultos hasta que cambie.
Todos tienen el código de abajo, pero no es 0px
max-height: 0px; overflow: hidden; transition: max-height 0.2s ease-out;El problema es que se overflow: hidden no oculta su relleno: debe eliminar el relleno de sus divs cuando está oculto y volver a agregarlo cuando se procesan
Puedes hacer esto así (ln 121 de tu demostración):
&__desktop, &__mobile, &__payout, &__currency, &__banking, &__platforms, &__countries, &__established, &__licensed, &__support, &__readmore { //... &.active { padding: 0px 40px 20px 40px; } // .... }Aparte: si desea simplificar su JS, aquí hay un punto de partida:
const accordionEls = document.getElementsByClassName("accordion"); // add an event listener to each element, using a named function definition Array.from(accordionEls).map(element => { element.addEventListener("click", toggleVisibility) }); function toggleVisibility(event) { // get the element that the event was attached to out of the event object const { currentTarget } = event; // generate .review_page__ classnames const classNames = [ "platforms", "countries", "licensed", "support", "established" ].map(name => `.review_page__${name}`); // get the elements with those class names, filtering any null // values out of the list const toggleElements = classNames .map(className => document.querySelector(className)) .filter(Boolean); // set the .active class on the read more button currentTarget.classList.toggle("active"); // loop over each element, switching its max height toggleElements.map(el => { const currentMaxHeight = el.style.maxHeight; const maxHeight = currentMaxHeight ? null : `${el.scrollHeight}px`; el.style.maxHeight = maxHeight; }); }