Est-il possible de faire basculer la visibilité d’un élément, à l’aide des fonctions .hide(), .show() ou .toggle() ?
Comment tester si un élément est visible ou caché ?
Comme la question porte sur un seul élément, ce code pourrait être plus approprié :
// Vérifie le contenu du CSS pour 'display', ne tient pas compte de 'visibility'.
$(element).is(":visible");
// Le même principe s'applique à 'hidden'
$(element).is(":hidden");
Nous utilisons la méthode is() de jQuery pour vérifier l’élément sélectionné avec un autre élément, un sélecteur ou tout autre objet jQuery. Cette méthode parcourt les éléments du DOM pour trouver une correspondance, qui satisfait le paramètre passé. Elle renvoie true s’il y a une correspondance, sinon elle renvoie false.
Vous pouvez utiliser le sélecteur hidden:
// Trouver tous les éléments qui sont cachés
$('element:hidden')
Et le sélecteur visible:
// Trouver tous les éléments qui sont visibles
$('element:visible')
La méthode suivante ne tient pas compte de la visibilité du parent. Pour prendre en compte le parent également, vous devez utiliser .is(":hidden") ou .is(":visible").
if ($('#div1').css('display') == 'none' || $('#div1').css("visibility") == "hidden"){
// '#div1' est caché
}
Par exemple,
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
Cette méthode considérera que div2 est visible alors que :visible ne l’est pas. Mais cette méthode peut servir dans de nombreux cas, notamment lorsque vous avez besoin de savoir s’il existe des divs visibles dans le parent caché, car dans de telles conditions, :visible ne fonctionnera pas.
Essayez le code suivant: