Respuestas:
Intente configurar display:nonepara ocultar y configurar display:blockpara mostrar.
display: block, algunos tendrán que establecerse en display: inline(como <span>o <a>o <img>elementos DOM).
hiddencon display: none. Agregue la clase a un elemento para ocultarlo, elimínelo show. Al eliminarlo, la displaypropiedad se restaura al valor predeterminado del elemento.
Usar display:nonees una buena opción solo para eliminar un elemento PERO también se eliminará para los lectores de pantalla . También hay discusiones si afecta el SEO. Hay un buen artículo breve sobre ese tema en A List Apart
Si realmente solo quiere ocultar y no eliminar un elemento, mejor use:
div {
position: absolute;
left: -999em;
}De esta manera, también puede ser leído por lectores de pantalla.
La única desventaja de este método es que este DIV se procesa realmente y puede afectar el rendimiento , especialmente en teléfonos móviles.
visibility: hidden;, digamos que tiene otros elementos absolutos que no tendrán un conflicto por el espacio, solo conflicto de z-index. Solo por ocultar un elemento con el que iríavisibility
Mira, en lugar de usar el visibility: hidden;uso display: none;. La primera opción se ocultará pero aún ocupa espacio y la segunda opción se ocultará y no ocupará espacio.
La respuesta a esta pregunta dice usar display: none y display: block, pero esto no ayuda a alguien que está tratando de usar transiciones CSS para mostrar y ocultar contenido usando la propiedad de visibilidad.
Esto también me volvió loco, porque el uso de la pantalla mata las transiciones CSS.
Una solución es agregar esto a la clase que usa visibilidad:
overflow:hiddenPara que esto funcione depende del diseño, pero debe mantener el contenido vacío dentro del div en el que reside.
display: none is solution, eso oculta completamente elementos con su espacio.
display:noneyvisibility: hiddenvisibility:hidden significa que la etiqueta no está visible, pero se le asigna espacio en la página.
display:nonesignifica que esconde completamente elementos con su espacio. (aunque aún puede interactuar con él a través del DOM)
Alternar displayno permite transiciones CSS suaves. En cambio, alternar tanto el visibilitycomo el max-height.
visibility: hidden;
max-height: 0;transform: translateX(-100%). No queremosdisplay: none
display:nonepara ocultar y configurar display:blockpara mostrar.
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hiddensolo detiene la visualización del contenido, pero aún utiliza el espacio vertical / horizontal, pantalla: ninguno elimina el espacio vertical / horizontal del elemento.
Aquí hay una opinión diferente sobre cómo volver a colocarlos después de la visualización: ninguno. no use display: block / inline, etc. En su lugar (si usa javascript) configure la visualización de la propiedad css en '' (es decir, en blanco)
por encima de mi conocimiento es posible de 4 maneras
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none');& $("#buttonId").css('opacity', 0);
offsetTop, ydisplay:nonelo estableceríaoffsetTopen 0. Mi solución aquí era usar,visibility: hiddenluego establecer el ancho y la altura en 0. Una vez que necesitaba volver a hacer visible el elemento, eliminé los tres atributos usando Javascript Una solución un poco hacky, pero funciona bien para casi todos los casos de uso.