title: Hide and show list items of divs after nth item
body: <p>Say I have an unordered list, like so:</p>
  
  <p><strong>HTML Code :</strong></p>
  
  <pre><code>&lt;ul&gt;
     &lt;li&gt;One&lt;/li&gt;
     &lt;li&gt;Two&lt;/li&gt;
     &lt;li&gt;Three&lt;/li&gt;
     &lt;li&gt;Four&lt;/li&gt;
     &lt;li&gt;Five&lt;/li&gt;
     &lt;li&gt;One 1&lt;/li&gt;
     &lt;li&gt;Two 2&lt;/li&gt;
     &lt;li&gt;Three 3&lt;/li&gt;
     &lt;li&gt;Four 4&lt;/li&gt;
     &lt;li&gt;Five 5&lt;/li&gt;
     &lt;li&gt;One 11&lt;/li&gt;
     &lt;li&gt;Two 22&lt;/li&gt;
     &lt;li&gt;Three 33&lt;/li&gt;
     &lt;li&gt;Four 44&lt;/li&gt;
     &lt;li&gt;Five 55&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How would i using jquery or javascript , show only first five list items and have a 'show more' text there , so when clicked upon , the next five list items would be appear?</p>
  
  <p><strong>Script :</strong></p>
  
  <pre><code>$('ul').each(function(){
      var max = 4
      if ($(this).find('li').length &gt; max) {
          $(this).find('li:gt('+max+')').hide().end().append('&lt;li class="sub_accordian"&gt;&lt;span class="show_more"&gt;(see more)&lt;/span&gt;&lt;/li&gt;');
          $('.sub_accordian').click( function(){
              $(this).siblings(':gt('+max+')').toggle();
              if ( $('.show_more').length ) {
                  $(this).html('&lt;span class="show_less"&gt;(see less)&lt;/span&gt;');
              } else {
                  $(this).html('&lt;span class="show_more"&gt;(see more)&lt;/span&gt;');
              };
          });
      };
  });
  </code></pre>
  
  <p>when i click on 'show more' it should be visible next five results . Once every results loaded 'show more' text would be changed on 'less more'.</p>
  
  <p>and when i clicked upon the 'less more' button first results should be visible other list items should be hide and 'less more' text changed to 'show more'</p>