Show hidden items continuously with jquery waypoints

Question

I have a list of elements from which first 2 is shown and others are hidden by css.

<div class="container">
    <ul>
      <!-- shown -->
      <li>content...1</li>
      <li>content...2</li>

      <!-- hidden -->
      <li>content...3</li>
      <li>content...4</li>
      <li>content...5</li>
      <li>content...6</li>
      <li>content...7</li>
    <ul>
  </div>

Now I want to show 2 more elements when I scroll bottom to the container div and so on until all items are shown. I already have a function showMoreItems() which shows more items. I just need to call this function every time. How can I do that with waypoint. I was looking at infinite scroll, but that is used for ajax calls. But I am not using ajax. Items are already in the DOM, just hidden. But the feel is same.

This I have used in other page to trigger a function when it comes in view.

$el.waypoint( function( direction ) {
            if( direction === 'down' ) {
                animateNumber($el, $el_span, theNumber);
            }
        }, { 
                offset: '85%',
                triggerOnce: true,
        });

entio entio · Accepted Answer · 2014-05-30T08:37:09

I was trying to achieve same functionality with waypoint, but then i switched to jquery inview plugin. (https://github.com/protonet/jquery.inview)

It may help You a bit..

Show hidden items continuously with jquery waypoints

1 Answers