Question

<div id="facts">
<p>notes:</p><span class="hide">note 1</span>
             <span class="hide">note 2</span>
             <span class="hide">note 3</span>
             <span class="hide">note 4</span>
</div>

I’m trying to make a simple ‘slideshow’ looping cycle that shows only one span to the right of the ‘fact:’ at a time but I can’t seem to figure out how to get it to work properly.

.hide {
    display: none;
}

.show {
    display: inline;
}

I’m thinking you could just add/remove classes using jquery?

Answer 1

Using jQuery .hide(), you can first hide all of them. Then increment a variable on click, and compare its value to % 4 where 4 is the total number of available spans. Unhide the :eq() for the variable’s current value.

$(document).ready(function() {
    var current = 0;

    // This is bound to the onclick, but you can attach it to any event.
    $('#facts').click(function() {
      // Hide all of them
      $('#facts span').hide();
      // Unhide the current one:
      $('#facts span:eq(' + (current % 4) + ')').show();
      // Increment the variable;
      current++;
    });
});

​
Here is a live demo

Note that if the number of child <span> varies, you would want to use $('#facts span').length as the modulo % comparison rather than the hard-coded 4 as in:

$('#facts span:eq(' + (current % $('#facts span').length) + ')').show();