Question

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

Answer 1

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