Ocultar div pero mantener el espacio vacío

Tengo el siguiente div

CSS 

.description {
    color: #b4afaf;
    font-size: 10px;
    font-weight: normal;
}

HTML 

<div class="description">Some text here </div>

Luego tengo una función de clic en un elemento para ocultar el div anterior: 

$('#target').click(function(){
  $(".description").hide();
});

Cuando escondo el div se colapsará (deje de tomar cualquier espacio). Esto está jugando con el diseño de mi página.

¿Hay alguna manera de ocultar el div pero aún así tomar el espacio que estaba tomando antes? No quiero cambiar el color de la fuente porque todavía sería seleccionable.

Gracias

Author: Youssef, 2013-05-01
Source

5 answers

Use visibilidad propiedad css para esto

Visibilidad:

La propiedad visibility especifica si las cajas generadas por un elemento se representan.

$(".description").css('visibility', 'hidden');

Demo: Fiddle

 95
Author: Arun P Johny,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-01 10:31:09

Y otra opción en aras de la integridad. Toggle opacity: 

$(".description").css('opacity', 0); // hide
$(".description").css('opacity', 1); // show

Http://jsfiddle.net/KPqwt /

Sin embargo, se prefiere usar visibility para esta tarea.

 7
Author: dfsq,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-01 10:34:42

Intenta: 

$(".description").css("visibility", "hidden")

hide() es el equivalente a: $(".description").css("display", "none");

Que no reserva el espacio que el elemento estaba tomando.

Hidden hace que el elemento invisible, pero aún reserva el espacio.

 5
Author: Darren,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-01 10:26:56

Es importante tener en cuenta que el ejemplo de dfsq usando Opacity:0 todavía permitirá que el contenido sea seleccionado, copiado/pegado, etc., aunque no hay resaltado de texto visible al seleccionar.

 1
Author: fpscolin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:17:39

Puede envolver otro div alrededor de su exterior, y probablemente decirle una altura específica para ocupar. de esa manera, su div interno puede mostrar y ocultar y desvanecerse, etc., y el div externo mantendrá presionados los bienes raíces en la página.

 0
Author: Heinz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-11 20:42:15