This is answer is predicated on my inferring your question to be:
How do I assess whether something is shown or hidden?
This question inferred from your comment to another answer:
... I want to check the toggle status is show or hide.
You're misunderstanding what toggle(Boolean)
does; if you pass a Boolean that evaluates to true
(or otherwise 'truthy') then it will show the element, otherwise a false
(or 'falsey') value will hide the element(s) upon which toggle()
was called.
To retrieve whether the element is shown, you should evaluate the Boolean itself (allowing for truthy/falsey values):
var isShown = showOrHide ? "Yes, it's shown" : "No, it's hidden";
Or, more strictly:
var isShown = showOrHide === true ? "Yes, it's shown" : "No, it's hidden";
You could also use jQuery's .is(':visible')
which returns a Boolean value describing whether the element upon which it's called is visible to the user (true
), or hidden (false
):
var isShown = $('#element').is(':visible');
A very simple case, illustrating the use of .is('visible')
:
$('#toggleControl').on('change', function(){
$('#demo').toggle(this.checked);
$('#status').text(function(){
return $('#demo').is(':visible') ? 'Shown' : 'Hidden';
});
}).change();
JS Fiddle demo.
And, similarly, a demo testing the Boolean itself:
$('#toggleControl').on('change', function(){
var checkbox = this;
$('#demo').toggle(checkbox.checked);
$('#status').text(function(){
return checkbox.checked ? 'Shown' : 'Hidden';
});
}).change();
JS Fiddle demo.
Both demos operate on the following HTML:
<input type="checkbox" id="toggleControl" /><label for="toggleControl"> element</label>
<div id="status"></div>
<div id="demo">
<p>Can be shown or hidden, by checking, or unchecking, the checkbox.</p>
</div>
References: