.click, Find next class element in parent, fade in, remove class. Repeat

Question

Ideally, im trying to click a div, find the next class within a parent. fade in that class, remove the class.

Click div again, then find next class of 'page', fades in, remove the class.

Any help would be great. Currently, .find, .next, .nextAll is resulting in all ul with the class page to fade in at once.

HTML

<div id="container" class="">
    <ul id="page_1">
    <ul id="page_2" class="page">
    <ul id="page_3" class="page">
    <ul id="page_4" class="page">
    </div>

JS

$("#click").click(function() { 
    $("#container").children().closest('.page').fadeIn();
});

Answer 1

You could try:

$("#click").click(function() {
    var active;
    if ($('#container > .active').length) {
        active = $('#container > .active');
        active.removeClass('active');
        active.next().addClass('active');
        active = active.next();
    } else {
        active = $('#container > .page:first');
        active.addClass('active');
    }
    active.fadeIn();
});

(Your markup i s not correct this assumes:)

<div id="container" class="">
    <ul id="page_1"></ul>
    <ul id="page_2" class="page"></ul>
    <ul id="page_3" class="page"></ul>
    <ul id="page_4" class="page"></ul>
 </div>

fiddle here http://jsfiddle.net/kmtCV/2/