Estoy tratando de crear un contenedor que contenga texto e imágenes, y comience con un tamaño determinado, digamos 48 px. Al hacer clic, quiero que el contenedor crezca para adaptarse al contenido y, con un segundo clic, se reduzca a 48 px. El problema principal es que no quiero establecer la altura para el contenedor de tamaño completo, me gustaría que el contenedor cambie de tamaño automáticamente para adaptarse al contenido.
Descubrí cómo iniciar el blog en tamaño completo, reducir y volver a crecer, pero no puedo encontrar una manera de que comience pequeño, crezca y se reduzca de nuevo.
const hoistingId = document.getElementById('hoisting') function enlargeBlogItem() { if(hoistingId.style.height===''){ hoistingId.style.height = '3rem'; } else { hoistingId.style.height = ''; } } hoistingId.addEventListener('click', enlargeBlogItem)Puede usar overflow: hidden; en el elemento principal para asegurarse de que los elementos secundarios estén dentro del principal y no se superpongan y luego use una función de JavaScript para manejar los cambios de tamaño. El atributo attr-small se usa para almacenar el valor original de height . Al eliminar el atributo de height del estilo del padre, por defecto envolverá a los hijos.
function toggleSize(el){ const originalSize = el.getAttribute('attr-small'); if(el.style.height === originalSize) { el.style.removeProperty('height'); } else { el.style.height = originalSize; } } #container { border: 1px solid; width: 200px; overflow: hidden; } #container:hover { cursor: pointer; } .foo { width: 90px; height: 90px; background-color: red; display: inline-block; margin-left: 5px; margin-top: 5px; } <div id='container' onclick='toggleSize(this)' attr-small='48px' style='height:48px;'> <div class='foo'></div> <div class='foo'></div> <div class='foo'></div> <div class='foo'></div> <div class='foo'></div> <div class='foo'></div> </div>