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

1

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.

edited Dec 2, 2013 at 12:24

answered Dec 2, 2013 at 12:17

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adil Over a year ago

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

1

Try like

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

answered Dec 2, 2013 at 12:17

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Comments

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

1

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');
}

edited Dec 2, 2013 at 12:44

answered Dec 2, 2013 at 12:18

R. Oosterholt

8,2003 gold badges56 silver badges80 bronze badges

3 Comments

A. Wolff Over a year ago

i cannot think about a simpler solution

Parveez Ahmed Over a year ago

Thanks @R. Oosterholt

Arun P Johny Over a year ago

@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

0

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'
    })
}

edited Dec 2, 2013 at 12:41

answered Dec 2, 2013 at 12:20

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related