Question

I have a section on my page that is to show 3 divs at a time, although there may be additional divs hidden.

By clicking on a “more” button, the next 3 divs will fade in, and the previous ones will fade out.

So if we have 6 divs, the first 3 are displayed, clicking on the More button, divs 4-6 will be displayed.

If possible the 3 divs should be shown at all time.

So for example if we have 5 divs, then when you click on the More button, divs 3-5 are displayed.

I know there is a jquery plugin called jCarousel that can do this, but just wondering if it is possible without a plugin because I am building a responsive website and the carousel plugin uses fixed size DIVs.

EDIT:
HTML:

<a class="more" href="#">More</a>

<div id="container">
    <div class="item"><div>One</div><div>some more text</div></div>
    <div class="item"><div>Two</div><div>some more text</div></div>
    <div class="item"><div>Three</div><div>some more text</div></div>
    <div class="item"><div>Four</div><div>some more text</div></div>
    <div class="item"><div>Five</div><div>some more text</div></div>
    <div class="item"><div>Six</div><div>some more text</div></div>

</div>

Javascript:

$("#container .item").slice(0,3).show();

$(".more").click(function(event) { 
  var $currElements = $("#container .item:visible");
  var $nextElements = $("#container .item:hidden");


    $currElements.hide();
    $nextElements.show();

    event.preventDefault();

});

This is what I currently have: http://jsfiddle.net/Wnp5J/

Just wondering now if it is possible to cycle back to the first 3 items when you click on the button again.

Also, if possible, to always display 3 items.

Answer 1

jsFiddle: Paging & transitions

jsFiddle: Paging (page always full)

jsFiddle: Carousel

Works for any number of elements.

Paging:

$("#container .item").slice(0,3).show();

$(".more").click(function() {

    var items = $('#container .item:visible').hide().last();

    var nextItems = items.nextAll().slice(0, 3);

    if (nextItems.length === 0) {
        nextItems = $("#container .item").slice(0, 3);
    }

    nextItems.show();
});

Paging w/Transitions:

$("#container .item").slice(0,3).show();

$(".more").click(function() {

    var items = $('#container .item:visible');

    var nextItems = items.last().nextAll().slice(0, 3);

    if (nextItems.length === 0) {
        nextItems = $("#container .item").slice(0, 3);
    }

    items.stop().hide(500, function() {
        nextItems.show(500);
    });
});

Paging (page always full):

$("#container .item").slice(0,3).show();

$(".more").click(function() {

    var items = $('#container .item:visible').hide().last();

    var nextItems = items.nextAll().slice(0, 3);

    if (nextItems.length === 1) {
        nextItems = $("#container .item").slice(-3);
    }

    if (nextItems.length === 0) {
        nextItems = $("#container .item").slice(0, 3);
    }

    nextItems.show();
});

Carousel:

$(function() {

    var container = $('#container');
    var cycle = function() {
        container.find('.item')
            .hide()
            .slice(0, 3)
            .appendTo(container)
            .show();
    }

    $(".more").click(function() {
        cycle();
    });

    cycle();
});