Как проверить, не является ли HTML-элемент скрытым?

У меня есть два моих элемента (setProject и setHdc). При нажатии на них отображаются другие элементы таблицы. Но я хочу, чтобы одновременно отображалась только одна группа элементов таблицы. например, когда пользователь нажал кнопку "setProject", элемент "setHdc" должен быть скрыт. и то же самое. Есть ли способ, которым я могу это сделать, например, если? Или есть более простой способ сделать это?

<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>

Ответ 1

Вы должны использовать

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

часть else будет работать только для элементов с display:none. элементы, которые имеют visibility:hidden/opacity:0 будут считаться видимыми

Ответ 2

Используйте селектор : visible

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

Ответ 3

$(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");
    });
});

Просто скройте противоположный элемент в событии.click для каждого элемента.