[jquery] 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!

This question is related to jquery if-statement hide show visible

The answer is


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:


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.


if visible.

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

if it's hidden.

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

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

try

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

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.


Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to if-statement

How to use *ngIf else? SQL Server IF EXISTS THEN 1 ELSE 2 What is a good practice to check if an environmental variable exists or not? Using OR operator in a jquery if statement R multiple conditions in if statement Syntax for an If statement using a boolean How to have multiple conditions for one if statement in python Ifelse statement in R with multiple conditions If strings starts with in PowerShell Multiple conditions in an IF statement in Excel VBA

Examples related to hide

bootstrap 4 responsive utilities visible / hidden xs sm lg not working jQuery get the name of a select option jQuery select change show/hide div event Hide Show content-list with only CSS, no javascript used Permanently hide Navigation Bar in an activity How can I hide/show a div when a button is clicked? jQuery hide and show toggle div with plus and minus icon Hide Text with CSS, Best Practice? Show div #id on click with jQuery JavaScript - Hide a Div at startup (load)

Examples related to show

How to show all of columns name on pandas dataframe? jQuery select change show/hide div event Hide Show content-list with only CSS, no javascript used How can I hide/show a div when a button is clicked? jQuery hide and show toggle div with plus and minus icon Show div #id on click with jQuery jQuery if statement to check visibility How to print a double with two decimals in Android? Programmatically Hide/Show Android Soft Keyboard Show Hide div if, if statement is true

Examples related to visible

How to use protractor to check if an element is visible? Jquery check if element is visible in viewport jQuery if statement to check visibility Check div is hidden using jquery How can I check if a view is visible or not in Android?