limit number of elements shown

by ian_smithz

HTML

<ul class="lia-list-standard" id="list_2">
    <li class="label even-row">	<a href="10031/label-name/new" id="link_418" class="label-link lia-link-navigation">New<wbr></wbr></a>
	<span class="label-count">1</span><span> Threads</span>

    </li>
    <li class="label odd-row">	<a href="/10031/label-name/Rohan" id="link_419" class="label-link lia-link-navigation">Rohan<wbr></wbr></a>
	<span class="label-count">1</span><span> Threads</span>

    </li>
    <li class="label even-row">	<a href="10031/label-name/Rahul" id="link_420" class="label-link lia-link-navigation">Rahul<wbr></wbr></a>
	<span class="label-count">1</span><span> Threads</span>

    </li>
    <li class="label odd-row">	<a href="10031/label-name/Preet" id="link_421" class="label-link lia-link-navigation">Preet<wbr></wbr></a>
	<span class="label-count">1</span><span> Threads</span>

    </li>
    <li class="label even-row">	<a href="10031/label-name/Singh" id="link_422" class="label-link lia-link-navigation">Singh<wbr></wbr></a>
	<span class="label-count">1</span><span> Threads</span>

    </li>
    <li class="label odd-row">	<a href="10031/label-name/Random" id="link_423" class="label-link lia-link-navigation">Random<wbr></wbr></a>
	<span class="label-count">2</span><span> Threads</span>

    </li>
    <li class="label even-row">	<a href="10031/label-name/Member" id="link_424" class="label-link lia-link-navigation">Member<wbr></wbr></a>
	<span class="label-count">2</span><span> Threads</span>

    </li>
</ul>

<button id="hide-list-btn" style="display:none">Show More</button>

CSS

.hidden-list-item {
		display:none;
	}

JavaScript

$(document).ready(function() {
		var show_limit = 4;
    $('.lia-list-standard li').each(function(){
        if ($(this).index() >= show_limit) {
            $(this).addClass('hidden-list-item');
            $('#hide-list-btn').show();
        }
    });

		$('#hide-list-btn').click(function(){
			$('.hidden-list-item').toggle();
			$('#hide-list-btn').text($('#hide-list-btn').text() == 'Show More' ? 'Show Less' : 'Show More')
		});
	});