cycle through spans on jquery click, removing the first-child
- by jacob
Basically, this advances to the next hidden span when clicked.
The markup:
<div id="facts">
<span>click to cycle</span>
<span>fact 1</span>
<span>fact 2</span>
<span>fact 3</span>
<span>fact 4</span>
</div>
The js:
$(document).ready(function() {
var current = 1;
$('#facts span').click(function() {
// Hide all of them
$('#facts span').hide();
// Unhide the current one:
$('#facts span:eq(' + (current % $('#facts span').length) + ')').show();
// Increment the variable
console.log(current % 4);
current++;
});
// Unhide the first one on load
$('#facts span:first-child').show();
});?
What I'm trying to do now is remove the first span after it's been clicked, because it is not necessary for the user to see the 'click to cycle' instruction again.
