Home » Jquery » jQuery if statement to check visibility

jQuery if statement to check visibility

Posted by: admin November 30, 2017 Leave a comment

Questions:

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!

Answers:

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:

Questions:
Answers:

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.

Questions:
Answers:

try

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

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

Questions:
Answers:

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.

Questions:
Answers:

if visible.

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

if it’s hidden.

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