jQuery- Increase displayed elements

Question

I have a some problems with my JQ Code.

Default I must show only 4 elements from my UL list. But if I click on "Show more" element I must display +4 more (+4) elements from UL list.

Anybody know how I can do this?

Sorry for my bad English :(

This is my code:

$(document).ready(function() {
    $('ul#Galeria > li:gt(3)').css( "display", "none" );
    $( ".readmore > a" ).click(function() {
        $("ul#Galeria > li:gt(3)").fadeIn("slow").show();
        $(".readmore").css('display', 'none');
        return false;
    });
});

http://jsfiddle.net/6w2nm7z1/

Please include the code in your question. Linking to jsFiddle is not enough, didn't the system tell you? — nicael, Nov 06 '14 at 15:23
possible duplicate of [jQuery load first 3 elements, click "load more" to display next 5 elements](http://stackoverflow.com/questions/17736786/jquery-load-first-3-elements-click-load-more-to-display-next-5-elements) — Bojan Petkovski, Nov 06 '14 at 15:27

score 2 · Accepted Answer · answered Nov 06 '14 at 16:11

KyleK is right. You needed to select jQuery. I made a your script more generic, allowing you to click read more until all items are shown and also set the number of items to show for each click. Hope this is helpful.

var displayCount = -1; // tracks how many are showing
var readMoreIncrement = 4; // number of items to show at each increment
var liTotal = $("ul#Galeria li").length; // total number of items in list
console.log("liTotal: "+liTotal);
readMore();
$(".readmore > a" ).click(readMore);
function readMore () {
    displayCount += readMoreIncrement;
    console.log("displayCount: "+displayCount);
    $('ul#Galeria > li:gt(' + displayCount + ')').css( "display", "none" ); // hides items that are not ready to be shown
    $("ul#Galeria > li:lt(" + (displayCount + 1) + ")").fadeIn("slow").show(); // shows the next set of items
    if(displayCount >= (liTotal - 1)) $(".readmore").css('display', 'none'); // hides read more link when all items are shown
    return false;
}

Demo: http://jsfiddle.net/wilchow/o771897y/4/

score 0 · Answer 2 · answered Nov 06 '14 at 15:39

You did not select jQuery in Frameworks & Extensions menu. So this simple code works:

$('ul#Galeria > li:gt(3)').fadeOut(0);
$( ".readmore > a" ).click(function() {
    $("ul#Galeria > li:gt(3)").fadeIn("slow");
});

http://jsfiddle.net/KyleKatarn/6w2nm7z1/3/

jQuery- Increase displayed elements

2 Answers2