Check the visibility or display of an element in javascript

Question

I have 10 divs.By default, the visibility of all of them is set to "hidden". When I click a button,they get visible:

<script> function fun(x) { document.getElementById(x).style.visibility="visible"; } </script> <div id="div1" style="visibility:hidden">div1</div><input type="button" value="click" onclick="fun('div1')"> <div id="div2" style="visibility:hidden">div2</div><input type="button" value="click" onclick="fun('div2')">

. . . Is there any way to detect in the fun() function whether a div is visible or hidden so that by examining the state of the div(visible/hidden) it can be made hidden/visible just by clicking the button each time?

My second question is that(first one is already solved): suppose div1 is visible,now I click button number 2,as a result div2 will be also visible,but div1 appears hidden without clicking button number 1 again and so on...How ?

Adil · Accepted Answer · 2013-12-02 12:24:54Z

You can get value of property visibility and compare it with its possible values.

function fun(x) { if( document.getElementById(x).style.visibility == "visible") document.getElementById(x).style.visibility = "hidden"; else document.getElementById(x).style.visibility = "visible"; }

If you can use jQuery then you can use show(), hide() functions but they use display property instead of visibility.

There was a type copy if statement and try again, let me know if it does not work

GautamD31 · Accepted Answer · 2013-12-02 12:17:23Z

Try like

function fun(x) { document.getElementById(x).style.visibility = (document.getElementById(x).style.visibility != "visible") ? "visible" : "hidden"; }

R. Oosterholt · Accepted Answer · 2013-12-02 12:44:12Z

If jQuery is an option for you, you can use jQuery toggle

Toggle however toggles display (not visibility); if this is ok for you try:

function fun(x) { $("#"+x).toggle(); }

jQuery solution for toggling the visibility:

function fun(x) { var $obj = $("#"+x); $obj.css('visibility', $obj.css('visibility')=='hidden'?'visible':'hidden'); }

@A.Wolff but visibility and display does two different things

Ankit Tyagi · Accepted Answer · 2013-12-02 12:17:49Z

0

In jquery :

if($('#div1').is('visible')) { // do something }

answered Dec 2, 2013 at 12:17

Ankit Tyagi

2,37511 silver badges20 bronze badges

1 Comment

Spokey Over a year ago

Unfortunately this only works if the element is taking no space (like display:none). It will not work with visibility

Bas van Dijk · Accepted Answer · 2013-12-02 12:19:02Z

0

In jQuery you can use $(x).is(":visible")

function fun(x) { if( $(x).is(":visible") ) { } }

answered Dec 2, 2013 at 12:19

Bas van Dijk

10.8k10 gold badges62 silver badges95 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-12-02 12:41:04Z

Try

function toggle(x) { var style = document.getElementById(x).style; style.visibility = style.visibility == "visible" ? 'hidden' : 'visible' }

or jQuery equivalent

function toggle(x) { $('#' + x).css(visible, function (_, visibility) { return visibility == "visible" ? 'hidden' : 'visible' }) }

Collectives™ on Stack Overflow

Check the visibility or display of an element in javascript

6 Answers 6

1 Comment

Comments

3 Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

3 Comments

1 Comment

Comments

Comments

Related