Hiding div by jQuery

Question

I have the following code snippet in jQuery:

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

I need to hide the div if the attribute visibility is equal to visible and display the div if the attribute is equal to collapse. The problem is that he enters the first if does what I want and then enters the second if hiding the div again. How do I not enter the second if ?

Answer 1

In short, you’re using two if() and without any return. That way, it will enter both. An "alternative" (gambiarra in my opinion) would be to put a return on if(). It would be 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 the if() and else(), in this way:

$('#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');
    }
});

That way he’ll enter the first or the second, but never both.

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

Would look this way:

$('#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() in the end.

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

Answer 2

I believe the best alternative is really one of the ones 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 the comparison made by .css. See what the Tableless article says.

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

In short, with the use of the variable, you will only make a simple comparison of a variable.

I hope I’ve helped.

Answer 3

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

$('#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');
    }
});

Answer 4

You can use the Hide/Show of jquery to hide your DIV. Tutorial link: http://www.w3schools.com/jquery/jquery_hide_show.asp

Tutorial example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show

Note: When you enter the first if you make the property visibility receive "Collapse", consequently at if next he is true and enters too!

I hope I’ve helped!