Hiding div by jQuery

In short, you are using two if() and no return. That way, it will come in both. An "alternative" (gambiarra in my opinion) would be to put a return on if() . It would look something like this:

$('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
        return;
    }
    if ($('#divFiltros').css('visibility') === 'collapse') {
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});

However, there are two more better options.

The first is to use only if() and else() , like this:

$('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
    }
    else{
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});

This way it will enter the first or second, but never both.

A second option would be to use else if() . This way you can have more than one condition, but only "will" enter the first accepted condition.

It would look like this:

$('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
    }
    else if ($('#divFiltros').css('visibility') === 'collapse') {
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});

You can still add more else if or a else() at the end.

Remembering that you can also use a switch() , depending on the case.

Just put a return inside the first IF , so that it does not continue execution:

$('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
        return true;
    }
    if ($('#divFiltros').css('visibility') === 'collapse') {
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});

You can use Hide/Show of jquery to hide your DIV. Tutorial link: link

Tutorial example: link

Note: When you enter the first if you get the visibility property to receive "collapse", consequently in the if next it is true and enter too!

I hope I have helped!

I think the best alternative is even one that Randrade mentioned.

$('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
    }
    else if ($('#divFiltros').css('visibility') === 'collapse') {
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});

or

   $('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
    }
    else{
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});

However, if you want to use only one variable, it can be done like this:

var visivel = true;
 $('#btnFiltros').click(function () {
        if (visivel  === true) {
            $('#divFiltros').css('visibility', 'collapse');
            $('#divFiltros').css('display', 'none');
            visivel = false;
        }else if (visivel   === false) {
            $('#divFiltros').css('visibility', 'visible');
            $('#divFiltros').css('display', 'block');
            visivel = true;
        }
    }); 

This option is valid to avoid comparison made by .css. See what the Tableless article says.

  

Looking at the jQuery source code, the .css () method has about 20 lines (not counting other methods called). The above assignment could be performed as follows with a single line:    jQuery: optimization and performance tips

In short, using the variable, you will only do a simple comparison of a variable.

I hope I have helped.