jQuery if statement to check visibility

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!

Solution 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/

Solution 2:

Yes you can use .is(':visible') in jquery. But while the code is running under the safari browser .is(':visible') is won't work.

So please use the below code

if( $(".example").offset().top > 0 )

The above line will work both IE as well as safari also.

Solution 3:

try

if ($('#column-left form:visible').length > 0) { ...

Solution 4:

 $('#column-left form').hide();
 $('.show-search').click(function() {
    $('#column-left form').stop(true, true).slideToggle(300); //this will slide but not hide that's why
    $('#column-left form').hide(); 
    if(!($('#column-left form').is(":visible"))) {
        $("#offers").show();
    } else {
        $('#offers').hide();
    }
  });