I am trying to mimic an ajax feel to loading multiple list items using jquery.

Ultimately i would like to show 10 items and then 10 more after clicking Load More button.

My code:

<ul id=listings-container>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

    <li>List item ...</li>

</ul>



<a class=button href=#>Load More</a>

I tried this, simplest way to lazy load long <ul> with many <li>s

I am trying to accomplish similar with click rather than scroll.

Any ideas?