Matthew Woodard Matthew Woodard - 2 months ago 25
CSS Question

How to lazy load list items with onclick()?

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?

kei kei
Answer

DEMO

jQuery

$(".button").on("click", function () {
    $("#listings-container").find("li:hidden:lt(10)").show();
});

CSS

#listings-container li {
    display:none;
}
Comments