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