hubbs wrote:
I have a list of divs that I would like to display one at a time when
a link is clicked.  How would I do this with jQuery?

<a href="#">Show another</a>
<div>Content 1</div>
<div style="display:none;">Content 2</div>
<div style="display:none;">Content 3</div>
<div style="display:none;">Content 4</div>
<div style="display:none;">Content 5</div>
<div style="display:none;">Content 6</div>

What I would like to do is reveal the next div in the list when the
"Show another" link is clicked, allowing the user to reveal all of the
divs, or just a few.

How about something like the following?:

    var $divs = $("div:not(:first)"), currentIdx = 0;
    $("a").click(function() {
        if (currentIdx <= $divs.length - 1) {
            $($divs.get(currentIdx++)).show();
        }
        return false;
    });

And you might want to add this before the return:

        if (currentIdx == $divs.length) {
            $(this).hide();
        }

Obviously the selectors would really need to change for anything more like a real page, but I think that logic would do it.

  -- Scott

Reply via email to