web-dev-qa-db-fra.com

Masquer div mais garder l'espace vide

J'ai le div suivant

CSS

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

HTML

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

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

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

Lorsque je cache le div, il s'effondre (arrêtez de prendre de la place). Cela dérange la mise en page de ma page.

Existe-t-il un moyen de masquer le div tout en occupant l'espace qu'il occupait auparavant? Je ne veux pas changer la couleur de la police car elle serait toujours sélectionnable.

Merci

jquerycsshtmlhide
59
Youssef

Utilisez la propriété visibilité css pour cela

visibilité:

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

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

Démo: Fiddle

114
Arun P Johny

Et une autre option par souci d'exhaustivité. Basculer opacity:

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

http://jsfiddle.net/KPqwt/

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

8
dfsq

Essayer:

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

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

Ce qui ne réserve pas l'espace occupé par l'élément.

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

5
Darren

Il est important de noter que l'exemple de dfsq utilisant Opacity: 0 permettra toujours au contenu d'être sélectionné, copié/collé, etc., bien qu'il n'y ait pas de surlignage de texte visible lors de la sélection.

1
fpscolin

vous pouvez envelopper un autre div autour de l'extérieur de celui-ci, et probablement lui dire une hauteur spécifique à occuper. de cette façon, votre div intérieur peut afficher et masquer et disparaître, etc., et le div extérieur maintiendra l'immobilier sur la page.

0
Heinz