0

I'm using

$('#analytics').toggle("slide");

to toggle an item's visibility. But when I try to check if it's visible using

$('#analytics').is(":visible")

It always shows up as visible once it was toggled visible once...

What is the best way of checking the item's visibility if it's controlled using jQuery toggle function?

Aerodynamika
  • 6,253
  • 10
  • 54
  • 104
  • Possible duplicate of [How do I check if an element is hidden in jQuery?](https://stackoverflow.com/questions/178325/how-do-i-check-if-an-element-is-hidden-in-jquery) – Matheus Cuba Apr 02 '18 at 17:58
  • depending on how you define your components, I would store it as a boolean in your object, and then apply and reference accordingly... As some nested structures can become quite complex. The reason why i said is that maybe #analytics is visible, but some div children might not. – Fallenreaper Apr 02 '18 at 17:58
  • 3
    Best would be to come up with a live snippet/js fiddle that has that exact problem, so that everyone can see and test it – Isac Apr 02 '18 at 17:59
  • 2
    Re @Isac's point: You can do an [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha)). – T.J. Crowder Apr 02 '18 at 18:00
  • What you've shown in the question clearly does get `false` after the `slide` completes: https://jsfiddle.net/bwz2dkh5/ So we do need that MCVE. – T.J. Crowder Apr 02 '18 at 18:04
  • could you please check my edit and feedback? – Scaramouche Apr 02 '18 at 18:32

1 Answers1

0

I think display is what you are looking for:

EDIT

I just tried your own $('#analytics').is(":visible") and think there might be a problem with your timing (think asynchronous); try this code which waits until the animation ends before querying for visibility, at least in the snippet works, I would really appreciate your feedback.

$('button').click(function(){
  $('#analytics').toggle("slide", function(){
    console.log($('#analytics').is(":visible") ? 'visible':'hidden');
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="analytics">analytics</div>
<button>button</button>
Scaramouche
  • 2,950
  • 1
  • 16
  • 42
  • Display is not the same as visibility, this will not work – Sterling Archer Apr 02 '18 at 18:01
  • @SterlingArcher, you did click *Run code snippet*, right? – Scaramouche Apr 02 '18 at 18:02
  • What if the button is not visible on the screen (user scrolled down) while the css is still set to display? – Chin Leung Apr 02 '18 at 18:04
  • @Scaramouche: There are several aspects to being visible, see [the jQuery documentation for the `:visible` feature the OP is using](https://api.jquery.com/visible-selector/). – T.J. Crowder Apr 02 '18 at 18:05
  • @ChinLeung, I don't think *not visible because window has been scrolled* is something the OP was aiming for when he tried `$('#analytics').is(":visible")` – Scaramouche Apr 02 '18 at 18:06
  • @T.J.Crowder, the OP is using `$('#analytics').toggle("slide");` to toggle an element's visibility, and what `.toggle("slide")` does apart from animating it first is setting `display` to `none`, right? which is the key to my answer. of course you cannot narrow down visibility to the state of `display` but in this case, how the OP is toggling it, it is perfectly viable IMO – Scaramouche Apr 02 '18 at 18:09
  • @Scaramouche: sure, but `:visible` checks that. So if `:visible` isn't working (according to the OP), doing your own check just on `display` isn't going to work either. – T.J. Crowder Apr 02 '18 at 18:20
  • @T.J.Crowder, please check my edit and tell me what you think – Scaramouche Apr 02 '18 at 18:31
  • @Scaramouche: It's entirely *possible* (and why I posted a working example for the OP and asked the OP to show us the actual problem), but it's speculation until/unless they do so -- hence my posting a comment, not an answer. – T.J. Crowder Apr 02 '18 at 22:19
  • @Scaramouche answer was right and correct. The key was to check visibility inside the toggle function because of the async code execution. Thank you! – Aerodynamika Apr 03 '18 at 08:01