Check for a button state of visible or hidden with JQuery

IvanGarcete
IvanGarcete used Ask the Experts™
on
Hello, I need to check the state of a button hay manage using toggle. I need to n¡now if it is visible or hidden. I'm using this:

alert($("cmdAdd:hidden"));

but it doesn't work. I also tried:

alert($("cmdAdd").is('visible'));

This last one gave me false when the button is hidden and when it's not.
Thanks.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
try

$('cmdAdd:visible');
Commented:
You can also try with

$("cmdAdd").css('display') == 'none' ==> true means hidden
$("cmdAdd").css('display') == 'none' ==> false means visible
leakim971Multitechnician
Top Expert 2014

Commented:
use the above test once the animation is ended not just after or during it
so use the callback function, you will need to rethink the logic of your code I think

$("cmdAdd").toggle(delay, function() {
    // do your test here, the animation is ended
})

Additionaly, check this page : http://api.jquery.com/visible-selector/
Elements with visibility: hidden or opacity: 0 are considered to be visible
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

HainKurtSr. System Analyst

Commented:
check this code
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
$(function(){
	alert('Button 1 visible : ' + $("#cmdAdd1").is(":visible"));
	alert('Button 2 visible : ' + $("#cmdAdd2").is(":visible"));
	alert('Button 3 visible : ' + $("#cmdAdd3").is(":visible"));
});
</script>

<button id=cmdAdd1 style="display:none">button 1</button>
<button id=cmdAdd2 style="visibility:hidden">button 2</button>
<button id=cmdAdd3>button 3</button>

Open in new window

Sr. System Analyst
Commented:
extended sample

<button id=cmdAdd1 style="display:none">button 1</button>

this syntax works fine, so set display "none" to hide or "" to show

also use # if you have and id, your syntax is wrong

alert($("cmdAdd").is('visible'));
-->
alert($("#cmdAdd").is('visible'));

assuming cmdAdd is the id of your element
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
$(function(){
	alert('Button 1 visible : ' + $("#cmdAdd1").is(":visible"));
	alert('Button 2 visible : ' + $("#cmdAdd2").is(":visible"));
	alert('Button 3 visible : ' + $("#cmdAdd3").is(":visible"));

	alert('Button 1 hidden : ' + $("#cmdAdd1").is(":hidden"));
	alert('Button 2 hidden : ' + $("#cmdAdd2").is(":hidden"));
	alert('Button 3 hidden : ' + $("#cmdAdd3").is(":hidden"));
});
</script>

<button id=cmdAdd1 style="display:none">button 1</button>
<button id=cmdAdd2 style="visibility:hidden">button 2</button>
<button id=cmdAdd3>button 3</button>

Open in new window

Author

Commented:
Yes! That's exactly what happen. My code was incorrect. And all the answers are correct! Thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial