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> 

Answer 1

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