title: Limit the number of elements in the List using Jquery
body: <p>I have created a fiddle at <a href="http://jsfiddle.net/4YvaP/" rel="nofollow">here</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="lia-list-standard" id="list_2"&gt;
      &lt;li class="label even-row"&gt;            &lt;a href="10031/label-name/new" id="link_418" class="label-link lia-link-navigation"&gt;New&lt;wbr&gt;&lt;/wbr&gt;&lt;/a&gt;
          &lt;span class="label-count"&gt;1&lt;/span&gt;&lt;span&gt; Threads&lt;/span&gt;
  
      &lt;/li&gt;
      &lt;li class="label odd-row"&gt;            &lt;a href="/10031/label-name/Rohan" id="link_419" class="label-link lia-link-navigation"&gt;Rohan&lt;wbr&gt;&lt;/wbr&gt;&lt;/a&gt;
          &lt;span class="label-count"&gt;1&lt;/span&gt;&lt;span&gt; Threads&lt;/span&gt;
  
      &lt;/li&gt;
      &lt;li class="label even-row"&gt;            &lt;a href="10031/label-name/Rahul" id="link_420" class="label-link lia-link-navigation"&gt;Rahul&lt;wbr&gt;&lt;/wbr&gt;&lt;/a&gt;
          &lt;span class="label-count"&gt;1&lt;/span&gt;&lt;span&gt; Threads&lt;/span&gt;
  
      &lt;/li&gt;
      &lt;li class="label odd-row"&gt;            &lt;a href="10031/label-name/Preet" id="link_421" class="label-link lia-link-navigation"&gt;Preet&lt;wbr&gt;&lt;/wbr&gt;&lt;/a&gt;
          &lt;span class="label-count"&gt;1&lt;/span&gt;&lt;span&gt; Threads&lt;/span&gt;
  
      &lt;/li&gt;
      &lt;li class="label even-row"&gt;            &lt;a href="10031/label-name/Singh" id="link_422" class="label-link lia-link-navigation"&gt;Singh&lt;wbr&gt;&lt;/wbr&gt;&lt;/a&gt;
          &lt;span class="label-count"&gt;1&lt;/span&gt;&lt;span&gt; Threads&lt;/span&gt;
  
      &lt;/li&gt;
      &lt;li class="label odd-row"&gt;            &lt;a href="10031/label-name/Random" id="link_423" class="label-link lia-link-navigation"&gt;Random&lt;wbr&gt;&lt;/wbr&gt;&lt;/a&gt;
          &lt;span class="label-count"&gt;2&lt;/span&gt;&lt;span&gt; Threads&lt;/span&gt;
  
      &lt;/li&gt;
      &lt;li class="label even-row"&gt;            &lt;a href="10031/label-name/Member" id="link_424" class="label-link lia-link-navigation"&gt;Member&lt;wbr&gt;&lt;/wbr&gt;&lt;/a&gt;
          &lt;span class="label-count"&gt;2&lt;/span&gt;&lt;span&gt; Threads&lt;/span&gt;
  
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(function(){
  
      $('.label-count').each(function() {
          $(this).after($('&lt;span&gt;').text(" Threads"));
      });
  
      $('.label-count').text(function(_, text) {
          return text.replace(/\ ( | \) / g, '');
      });
      }
  });
  </code></pre>
  
  <p>My requirement is that out of the list, I need to show only 4 elements and hide the remaining, and show a link "show more", when some one clicks on "show more", the entire list should be visible and "show more" link should become "show less" and vice versa.</p>