CODEWITHSUNDEEP
javascripthtmlzepto
SuperFrog
SuperFrog

Reputation: 7674

zepto javascript show x elements

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

10X!

Upvotes: 1

Views: 911

Answers (2)

jasonmerino
jasonmerino

Reputation: 3240

Here's one way to accomplish what you're asking.

$(function() {
  $('li').slice(5).toggle();

  $('span').click(function() {
    $('li').slice(5).toggle();
  });
});​

The first .slice(5).toggle() functions take all the list items selected, narrow them down to a subset of elements that starts at index 5 through the end. Then it toggles the visible state of the first element it finds in that subset.

We then attach a function to the click event on the span, which is our Show/Hide element. That function is actually just the same as the initial function we ran to hide all the elements past index 5.

Check out this JS Fiddle for a working example. Also, for further reference here are the docs on .slice() and here are the docs on .toggle().

Hope that helps!

Upvotes: 1

Torsten Walter
Torsten Walter

Reputation: 5792

Basically there are 2 ways.

  1. Use zepto to toggle a class and use css to define what to hide 

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

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

// use a show-more link to toggle display of remaining items
$("a.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;
});

  2. Use zepto "standalone" 

    var $list = $(ul);

// use the link to set the css properties directly
$("a.show-more").click(function(){

    var shouldShow = $list.hasClass("collapsed") == true;

    $("li:nth-child(n+4)", $list).css({
        "display": shouldShow : "" : "none"
    });

    $(this).html(shouldShow ? "Show less" : "Show more");
    return false;
});

Upvotes: 0

Related Questions