How to check if HTML element is/is not hidden? [duplicate]

Question

I have my two elements(setProject and setHdc). When clicked, they show other table elements. But I want to make only one group of table elements appear at the same time. for example when the user clicked on "setProject", the "setHdc" element must be hidden. and the same otherwise. Is there any way i can do it as If statment? Or is there a simpler way to do it?

<script> 
$(document).ready(function(){
  $("#setProject ").click(function(){
    $("#test1").fadeToggle("fast");
    $("#projectTable1").fadeToggle("fast");
    $("#projectTable2").fadeToggle("fast");
    $("#projectTable3").fadeToggle("fast");
  });
});
$(document).ready(function(){
  $("#setHdc").click(function(){
    $("#hdcTable1").fadeToggle("fast");
    $("#hdcTable2").fadeToggle("fast");
  });
});
</script>

@Rajaprabhu Aravindasamy - I already have the answer, but thanks! — PRO_gramista
– PRO_gramista, Commented Mar 24, 2014 at 13:44

Oli M · Accepted Answer · 2014-03-24 13:49:12Z

8

You should use

 if($(this).is(':visible')){
     doSomething();
 }else{
     doSomethingElse();
 }

the else part will only work for elements with display:none. elements that have visibility:hidden/opacity:0 will be considered visible

edited Mar 24, 2014 at 13:49

answered Mar 24, 2014 at 13:43

Oli M

1313 bronze badges

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

Comments

writeToBhuwan · Accepted Answer · 2014-03-24 13:42:33Z

4

Use the :visible selector

if($('#element').is(':visible'))
{
    //write the code for visible
}
else
{
    // write the invisible code
}

answered Mar 24, 2014 at 13:42

writeToBhuwan

3,28111 gold badges42 silver badges67 bronze badges

Comments

Chris Stephens · Accepted Answer · 2014-03-24 14:00:06Z

0

$(document).ready(function(){
    $("#setProject ").click(function(){
        $("#setHdc").hide();
        $("#test1").fadeToggle("fast");
        $("#projectTable1").fadeToggle("fast");
        $("#projectTable2").fadeToggle("fast");
        $("#projectTable3").fadeToggle("fast");
    });
    $("#setHdc").click(function(){
        $("#setProject").hide();
        $("#hdcTable1").fadeToggle("fast");
        $("#hdcTable2").fadeToggle("fast");
    });
});

Just hide the opposing element on the .click event of each element.

answered Mar 24, 2014 at 14:00

Chris Stephens

31 silver badge7 bronze badges

1 Comment

PRO_gramista Over a year ago

It's not a solution, because it hides my whole element, and user can't choose it anymoore.

Collectives™ on Stack Overflow

How to check if HTML element is/is not hidden? [duplicate]

3 Answers 3

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Linked

Related