toggleExtraItems

by jorgeluis

HTML

<ul id='someUl'>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
    <li>item10</li>
    <li>item11</li>
    <li>item12</li>
    <li>item13</li>
    <li>item14</li>
    <li>item15</li>
    <li>item16</li>
    <li>item17</li>
    <li>item18</li>
    <li>item19</li>
    <li>item20</li>
</ul>

JavaScript

function toggleExtraItems(ulId,showNumber) {
    var extraItems = $(ulId + ' li').slice(showNumber).hide();
    var openExtras = $('<span class="trigger show-more">&darr; Show more</span>').insertAfter(ulId).toggle(
        function(){
            $(this).html("&uarr; Show less");
            $(extraItems).slideDown(extraItems.length * 10);
        },
        function(){
            $(this).html("&darr; Show more");
            $(extraItems).slideUp(extraItems.length * 10);
        }
    );
}

toggleExtraItems('#someUl',10);