Check element if has specific css property (display = none)

Question

Kindly help me how to check if element has specific css property (display == none), I tried work around provided on following old questions (questions/2685724 & questions/11306736) but to no avail.

I can't use hasclass as property is being added on media query.

Fiddle here

TEST 1

$("a#navicon").click(function () { 
 var obj = $(this).siblings("ul").attr("id");
alert (obj);

if ($('ul#'+obj).prop("style")["display"] !== 'none') {

alert ("Element is visible");

} else {

alert ("Not!");

}
});

TEST 2

$("a#navicon").click(function () { 
 var obj = $(this).siblings("ul").attr("id");
alert (obj);

  if($('ul#'+obj).has(css('display','none')){
       alert("Display of the element is none!")
    } 

    else {
       alert("Element is visible!")
        }


  if(obj.attr('style').indexOf('display') !== none) {
 alert("Element is visible!")
}

    });

TEST 3

$("a#navicon").click(function () { 
 var obj = $(this).siblings("ul").attr("id");
alert (obj);

  if(obj.attr('style').indexOf('display') !== none) {
 alert("Element is visible!")
    } 

 else {

alert ("Element is not visible!");  

      }

    });

TEST 4

$("a#navicon").click(function () { 
 var obj = $(this).siblings("ul").attr("id");

 var bglength = ('ul#'+obj).css('display');

alert   (obj);


});

Answer 1

You can use .is(':visible') like following.

$("a#navicon").click(function() {
  var obj = $(this).siblings("ul");

  if (obj.is(':visible')) {
    alert("Element is visible");
  } else {
    alert("Not!");
  }
});

#topbar {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="header">
  <a id="navicon">| | | |</a>
  <ul id="topbar" class="topbar hidden">
    <li><a class="links">Profile</a></li>
    <li><a class="links">Work Experience</a></li>
    <li><a class="links">Skills and Qualification</a></li>
    <li><a class="links">Education</a></li>
    <li><a class="links">Work Sample</a></li>
    <li><a class="links">Contact</a></li>
  </ul>
</div>