jQuery if statement to check visibility

Question

I'm trying to write a script that will hidden/show div depending on other elements visibility. The action should take place when i click on other element. Here's what I've wrote so far:

$('#column-left form').hide();     $('.show-search').click(function() {         $('#column-left form').stop(true, true).slideToggle(300);         if( $('#column-left form').css('display') == 'none' ) {             $("#offers").show();         } else {             $('#offers').hide();         }     }); 

It hides the div, but it doesn't come back when I hide the form. Will be greatful for any help :)

edit:

Ok, I've managed to achive the desired effect by writing this:

$('#column-left form').hide();     $('.show-search').click(function() {         if ($('#column-left form').is(":hidden")) {             $('#column-left form').slideToggle(300);             $('#offers').hide();         } else {             $('#column-left form').slideToggle(300);             $("#offers").show();         }     });    

I don't know if it's written correctly but it works ;) Thanks everybody for help!

Answer 1

You can use .is(':visible') to test if something is visible and .is(':hidden') to test for the opposite:

$('#offers').toggle(!$('#column-left form').is(':visible')); // or: $('#offers').toggle($('#column-left form').is(':hidden')); 

Reference:

• http://api.jquery.com/is/
• http://api.jquery.com/visible-selector/
• http://api.jquery.com/hidden-selector/