Usando zepto.js (v1.2.0), ¿cómo puede mostrar X elementos de una ul, ocultar el resto y mostrarlos solo cuando el usuario hace clic en el enlace/botón "mostrar más"?

He probado el siguiente código pero no funcionó.

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: