Masquer la div mais conserver l'espace vide

Question

J'ai l'élément div suivant :

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

Du texte ici

Ensuite, j'ai une fonction de clic sur un élément pour masquer le div ci-dessus :

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

Lorsque je masque le div, il se réduit et cesse de prendre de l'espace. Cela perturbe la mise en page de ma page.

Y a-t-il un moyen de masquer le div, mais de conserver l'espace qu'il occupait avant ? Je ne veux pas changer la couleur de la police car elle resterait toujours sélectionnable.

Answer 1

Utilisez la propriété css visibility pour cela

visibility:

La propriété visibility spécifie si les boîtes générées par un élément sont rendues.

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

Demo: Fiddle

Answer 2

Et une autre option pour des raisons de complétude. Basculez opacity:

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

http://jsfiddle.net/KPqwt/

Cependant, l'utilisation de visibility est préférée pour cette tâche.

Answer 3

Essayer :

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

cacher() est l'équivalent de : $(".description").css("display", "none");

Ce qui ne réserve pas l'espace que l'élément prenait.

Caché rend l'élément invisible, mais réserve toujours l'espace.

Answer 4

Il est important de noter que l'exemple de dfsq utilisant Opacity:0 permettra toujours de sélectionner, copier/coller, etc., bien qu'il n'y ait pas de mise en évidence du texte sélectionné.

Answer 5

Vous pouvez envelopper une autre div autour de l'extérieur et lui donner probablement une hauteur spécifique à occuper. de cette façon, votre div interne peut s'afficher et disparaître et se fondu, etc, et la div extérieure maintiendra la superficie sur la page.