Billy Billy - 3 months ago 71
CSS Question

How to load more than one div at a time

I have 5 divs accompanied with a loadmore button which displays one of the hidden divs at a time. The display button then becomes disabled once the last div has been displayed.

How do I display 2 divs at time instead of one?

<p><a href="#" id="load-more">Load More</a></p>

<div class="group active" id="group1">
Initially display
</div>

<div class="group" id="group2">
1 Hide until you click load more
</div>

<div class="group" id="group3">
2 Hide until you click load more
</div>

<div class="group" id="group4">
3 Hide until you click load more
</div>

<div class="group" id="group5">
4 Hide until you click load more
</div>

$("#load-more").click(function() {
// show the next hidden div.group, then disable load more once all divs have been displayed
});


So far I have the following jquery which loads 1 div but not 2

JQuery

var $group = $('.group');

$("#load-more").click(function() {
// Prevent event if disabled
if ($(this).hasClass('disable')) return;

var $hidden = $group.filter(':hidden:first').addClass('active');
if (!$hidden.next('.group').length) {
$(this).addClass('disable');
}
});


Demo:http://jsfiddle.net/8Re3t/7/

Answer

Just add var $hidden1 = $group.filter(':hidden:first').addClass('active'); as below and it will work :)

var $group = $('.group');

    $("#load-more").click(function() {

        if ($(this).hasClass('disable')) return false;

        var $hidden = $group.filter(':hidden:first').addClass('active');
        var $hidden1 = $group.filter(':hidden:first').addClass('active');

        if (!$hidden.next('.group').length) {
            $(this).addClass('disable');
            $(this).next().addClass('disable');
        }
    });
Comments