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!

ThiefMaster · Accepted Answer · 2011-12-23T12:28:30.277

121

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:

edited Dec 23 '11 at 12:28

answered Dec 23 '11 at 12:22

ThiefMaster

310,957
84
592
636

1

This returns `true` if the element is visible or `false` if it is not. Worth noting. ;) – Purag Dec 23 '11 at 12:23
5

"to test if" kind of implies that it returns a boolean ;) – ThiefMaster Dec 23 '11 at 12:24
@Purmou: !$('#column-left form').is(':visible') will definitely return a boolean value however this statement is enclosed within toggle hence it should achieve the desired output. – Amit Rai Sharma Dec 23 '11 at 12:29
3

Noteworthy from the [jQuery docs](http://api.jquery.com/visible-selector/): `Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.` – Frank N Mar 31 '16 at 12:50

score 5 · Answer 2 · edited Jun 19 '14 at 06:45

5

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.

edited Jun 19 '14 at 06:45

Soner Gönül

97,193
102
206
364

answered Jun 19 '14 at 06:28

Baskar Madasamy

121
1
2
5

score 2 · Answer 3 · edited Dec 23 '11 at 12:32

2

try

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

edited Dec 23 '11 at 12:32

NickGreen

1,742
16
36

answered Dec 23 '11 at 12:24

kontur

4,934
2
36
62

Won't work, even an empty jQuery object evaluates to `true` in a boolean context (`!![] === true`). You could add `.length` though to make it work., – ThiefMaster Dec 23 '11 at 12:25
@ThiefMaster: I've edited the answer of kontur, so now it's correct! – NickGreen Dec 23 '11 at 12:56
1

Ty, downvote removed. I would omit the `> 0` though since the length will never be negative anyway. – ThiefMaster Dec 23 '11 at 15:50

score 2 · Answer 4 · answered Dec 23 '11 at 12:34

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

markdon · Answer 5 · 2016-07-27T02:20:18.270

After fixing a performance issue related to the use of .is(":visible"), I would recommend against the above answers and instead use jQuery's code for deciding whether a single element is visible:

$.expr.filters.visible($("#singleElementID")[0]);

What .is does is check whether a set of elements is within another set of elements. So you will looking for your element within the entire set of visible elements on your page. Having 100 elements is pretty normal and might take a few milliseconds to search through the array of visible elements. If you're building a web app you probably have hundreds or possibly thousands. Our app was sometimes taking 100ms for $("#selector").is(":visible") since it was checking if an element was in an array of 5000 other elements.

score 0 · Answer 6 · answered Aug 17 '17 at 01:51

0

if visible.

$("#Element").is(':visible');

if it's hidden.

$("#Element").is(':hidden');

answered Aug 17 '17 at 01:51

Nalan Madheswaran

10,136
1
57
42

jQuery if statement to check visibility

6 Answers6