Michael Michael - 1 month ago 8
Javascript Question

Why can't I display <ul> element using jQuery show method?

I have this element.

<ul id="inspectorMenu" class="nav pull-left" style="visibility: hidden;">
<li style="display: inline-block;text-align: center; max-height:35px;"><a class="navbar-brand" ui-sref="sites.list" style="padding: 11px 09px;" title="אתרים"><i class="glyphicon glyphicon-tree-conifer"></i></a></li>
<li style="display: inline-block;text-align: center;max-height:35px;"><a class="navbar-brand" ui-sref="sitesDamages.sitesList" style="padding: 11px 09px;" title="אירועים"><i class="glyphicon glyphicon-exclamation-sign"></i></a></li>
</ul>


At some point I call this jQuery row to show the element:

$("#inspectorMenu").show();


But element not displayed.

Any Idea element not displayed? What I do wrong?

Answer

JQuery's show is approximately the same as adding the css "display: block". Thus, the visibility on your ul will still be pertinent. Consider using "display: none" and then you can use .show() to show it.

$("#showMe").on("click", function(){
  $("#inspectorMenu").show()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="inspectorMenu" class="nav pull-left" style="display: none;">
  <li style="display: inline-block;text-align: center; max-height:35px;"><a class="navbar-brand" ui-sref="sites.list" style="padding: 11px 09px;" title="אתרים"><i class="glyphicon glyphicon-tree-conifer">Some Text</i></a>
  </li>
  <li style="display: inline-block;text-align: center;max-height:35px;"><a class="navbar-brand" ui-sref="sitesDamages.sitesList" style="padding: 11px 09px;" title="אירועים"><i class="glyphicon glyphicon-exclamation-sign">Some More Text</i></a>
  </li>
</ul>

<button id="showMe">Show Me</button>

Comments