JQuery if for visibility check

Question

I am trying to write a script that will hide / show div depending on the visibility of other elements. The action should be performed when I click on another item. Here is what I have written 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 does not return when I hide the form. It will be useful for any help :)

edit:

Well, I managed to achieve 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 do not know if it is written correctly, but it works;) Thank you all for your help!

Answer 1

You can use .is(':visible') to check that something is visible, and .is(':hidden') to check for the opposite:

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

Link:

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

Answer 2

Yes, you can use .is(':visible') in jquery. But while the code works under the Safari browser .is(':visible') will not work.

So please use the code below

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

In the above line, both IE and Safari will work.

Answer 3

to try

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

Answer 4

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

Answer 5

After fixing the performance issue associated with using .is (": visible"), I would recommend against the above answers and use jQuery code instead to determine if one element is visible:

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

What. is does, checks if a set of elements is within another set of elements. Thus, you will search for your element in the entire set of visible elements on your page. The presence of 100 elements is quite normal and it may take several milliseconds to search through an array of visible elements. If you are building a web application, you probably have hundreds or maybe thousands. Our application sometimes took 100 ms for $ ("# selector"). Is (": visible") because it checked if there was an element in an array of 5,000 other elements.

Answer 6

if visible.

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

if it is hidden.

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