Question

I have this HTML:

<div id="container">

<div class="boxes">first box</div>
<div class="boxes">second box</div>
<div class="boxes">third box</div>

</div>

<a href="jquery">Show me next box</a>

Consider that initially only the first box is visible. When I click ‘Show me next box’ I want the current visible box to be hidden, and the next .boxes on the list to appear.

The only thing that I think it gets close is the .each function, but I shouldn’t cycle through all divs just to show one, I think.

Answer 1

$('a').click(function() {
    var visibleBox = $('#container .boxes:visible');
    visibleBox.hide();
    var nextToShow = $(visibleBox).next('.boxes:hidden');
    if (nextToShow.length > 0) {
        nextToShow.show();
    } else {
        $('#container .boxes:hidden:first').show();
    }
    return false;
});

Live demo.