css - Hide and Show list items in menu in jquery? -

i have menu have items in lis. want whenever lis more 5 want display "view more" option , hide remaining lis , show them on click of "view more" , hide them reverse when "view more" of li clicked

this html

  <ul class="nav">     <li><a href="#">home</a></li>     <li><a href="#">categorys</a>         <div>             <ul> <a href=""> title="this example of caption"></a></ul>             <ul>                 <h3>title1</h3>                 <li data-bind="100002"><a href="#">1</a></li>                 <li data-bind="100028"><a href="#">2</a></li>             </ul>             <ul>                 <h3>title2</h3>                 <li data-bind="100000"><a href="#">1</a></li>                 <li data-bind="100004"><a href="#">2</a></li>                 <li data-bind="100007"><a href="#">3</a></li>                 <li data-bind="100009"><a href="#">4</a></li>                 <li data-bind="100010"><a href="#">5</a></li>//hide here , show view more option , show them on click                 <li data-bind="100011"><a href="#">6</a></li>                 <li data-bind="100051"><a href="#">7</a></li>             </ul>             <ul>                  <h3>title3</h3>                 <li data-bind="100103"><a href="#">1</a></li>                 <li data-bind="100105"><a href="#">2</a></li>                 <li data-bind="100115"><a href="#">3</a></li>                 <li data-bind="200071"><a href="#">4</a></li>                 <li data-bind="200072"><a href="#">5</a></li>//hide here , show view more option , show them on click                 <li data-bind="200073"><a href="#">6</a></li>                 <li data-bind="200043"><a href="#">7</a></li>                 <li data-bind="200044"><a href="#">8</a></li>                 <li data-bind="200045"><a href="#">9</a></li>                 <li data-bind="200046"><a href="#">10</a></li>                 <li data-bind="200047"><a href="#">11</a></li>                 <li data-bind="200048"><a href="#">12</a></li>             </ul>         </div>     </li> </ul> 

this jsfiddle of trying do:

jsfiddle

when lis not more 5 "view more" option should not there,and "view more" option should replaced less , on click of should hidden if go other "view more" , click opened 1 should closed.

based on jsfiddle, did following:

$('.nav li > div > ul')   .find('li:gt(4)') //you want :gt(4) since index starts @ 0 , h3 not in li   .hide()   .end()   .each(function(){       if($(this).children('li').length > 5){ //iterates on each ul , if have 5+ lis adds show more...           $(this).append(               $('<li>show more...</li>')               .addclass('showmore')               .click(function(){                   $(this).hide().siblings(':hidden').show();                   $('.showmore').not(this).show().siblings('li:gt(4)').hide();               })           );      }   }); 

demo: http://jsfiddle.net/dirtyd77/qn59g/4/

hope helps!

update

$('.nav li > div > ul')   .find('li:gt(4)') //you want :gt(4) since index starts @ 0 , h3 not in li   .hide()   .end()   .each(function(){       if($(this).children('li').length > 5){ //iterates on each ul , if have 5+ lis adds show more...           $(this).append(               $('<li>show more...</li>')               .addclass('showmore')               .click(function(){                   if($(this).siblings(':hidden').length > 0){                       $(this).html('show less...').siblings(':hidden').show();                   }else{                       $(this).html('show more...').show().siblings('li:gt(4)').hide();                   }               })           );      }   }); 

demo: http://jsfiddle.net/dirtyd77/qn59g/6/