ocultar un formulario dependiendo de si es visible o no: la verificación visible no funciona

I have this code to check if a span is hidden or visible depending on the value it will show or hide, the event is triggered when a user clicks a button:

$('form').on('click', '#agregar', function(){
// var p = $('#panel');
//var a = $('#agregar');
if($('#panel').is(':visible')){
    $('#panel').hide();
    $('#agregar').val('Mostrar Forma');
    alert('ocultar');
}else {
    //if($('#panel').is(':hidden')){
    $('#panel').show();
    $('#agregar').val('Ocultar Forma');
    alert('mostrar');
}
});

the problem is that even if its visible it will never hide it and the alert('mostrar') will always show so the conditional is always false, why is this? is my code wrong? my span is like this:

<span id="panel>a fieldset and a form here</span>

The css is on a external stylesheet and it's like

#panel{ display: none;}

Any help is greatly apreciated don't mind any code that's commented I was just trying different forms to see any changes

preguntado el 01 de febrero de 12 a las 22:02

2 Respuestas

try doing this if( $("#panel").css("display") != "none" )

Respondido 02 Feb 12, 03:02

Worked like a charm, do you know why :visibility does not work right? - Samuel Lopez

The :visible selector works fine if you're asking whether the particular element has been set to invisible (either via the display or visibility CSS style). However, if the element is hidden because a parent element is set to hidden, the :visible selector returns a false positive. - Dmitry Savy

yeah it did thanks i hadn't selected that it was the answer because I was away :d - Samuel Lopez

Try this extension to see if this helps you.

jQuery.extend(
  jQuery.expr[ ":" ], 
  { reallyvisible : function (a) { return !(jQuery(a).is(':hidden') || jQuery(a).parents(':hidden').length); }}
);

Respondido 02 Feb 12, 03:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.