Em resumo, você está usando dois if()
e sem nenhum retorno. Dessa forma, ele irá entrar nos dois. Uma "alternativa" (gambiarra em minha opinião) seria colocar um retorno no if()
. Seria algo como isso:
$('#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');
}
});
Porém, existe mais duas opções melhores.
A primeira é utilizar somente o if()
e else()
, desta forma:
$('#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');
}
});
Dessa forma ele entrará no primeiro ou no segundo, mas nunca nos dois.
Uma segunda opção seria utilizar o else if()
. Dessa forma pode ter mais de uma condição, mas só "entrará" na primeira condição aceita.
Ficaria desta forma:
$('#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');
}
});
Você ainda pode adicionar mais else if
ou um else()
no final.
Lembrando, que você também pode utilizar um switch()
, dependendo do caso.