Jquery hides container when it should be showing -

i trying hide h3 tag when sibling div's children display:none. however, when sibling div not visible, jquery hides h3 tag if div's children visible. ideas?

link jsfiddle: https://jsfiddle.net/00ofvxor/

html:

<h3 class="eventscontainer">h3</h3> <div class="eventscontainer" style="display:none;">     <ul>         <li class="statuscontainer" style="display:none;">li1</li>         <li class="statuscontainer" style="display:none;">li2</li>         <li class="statuscontainer">li3</li>     </ul> </div> 

jquery:

$(document).ready(function(){     $('div.eventscontainer').css('display',function(){         var children = $(this).find('li.statuscontainer');         if (children.length === children.not(':visible').length)         {             $(this).prev().css('display', 'none');             return 'none';         }         else         {             return 'block';         }     }); }); 

you need check display value. map children , return them if have display:none:

... var children = $(this).find('li.statuscontainer'); var hiddenchildren = children.map(function() {      if ($(this).css('display') === 'none')         return $(this) }); if (children.length === hiddenchildren.length) {      ... } ... 

which should give need.

see fiddle