Using zepto.js (v1.2.0), how can you show X items from a ul, hide the rest and show them only when the user clicks the "show more" Link/button?

I have tried the following code but not worked.

HTML:

<ul class="collapsed">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
    <li>Option 7</li>
</ul>
<button type="button" class="show-more">Show more</button>

CSS:

/* show only the first 3 list items */
ul.collapsed li:nth-child(n+4) {
    display: none;
}

JS:

var $list = $(ul.collapsed); // initially the list is collapsed

// use a show-more link to toggle display of remaining items
$("button.show-more").click(function(){

    // get the current state of the list by querying the className
    var shouldShow = $list.hasClass("collapsed") == true;
    $list.toggleClass("collapsed");

    // set the link text according to the task (show or hide)
    $(this).html(shouldShow ? "Show less" : "Show more");

    // its a link, don't follow it
    return false;
});

HTML: