How to check if HTML element is/is not hidden?

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, Mar 24 '14 at 13:44

Oli M · Accepted Answer · 2014-03-24T13:49:12.040

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 '14 at 13:49

answered Mar 24 '14 at 13:43

Oli M

141
3

score 4 · Answer 2 · answered Mar 24 '14 at 13:42

4

Use the :visible selector

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

answered Mar 24 '14 at 13:42

writeToBhuwan

3,093
8
32
63

score 0 · Answer 3 · answered Mar 24 '14 at 14:00

$(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.

It's not a solution, because it hides my whole element, and user can't choose it anymoore. — PRO_gramista, Mar 24 '14 at 14:22

How to check if HTML element is/is not hidden?

3 Answers3