Question

I’m trying to find the simplest JS solution, preferably jQuery, to accomplish the following: I have a number of divs, all with the same class, that I want to simply toggle visibility of each, one at a time.

<a href="#" id="toggle-trigger">Toggle Div Visibility</a>    
<div class="slide" id="slide-one"></div>
<div class="slide" id="slide-two"></div>
<div class="slide" id="slide-three"></div>
<div class="slide" id="slide-four"></div>
<div class="slide" id="slide-five"></div>

The first div, is by default, always visible via CSS.

.slide{
display:none;
}
#slide-one{
display:block;
}

I’ve been unable to find anything other than just toggling between two elements, not multiple items. Please let me know if I can find the answer elsewhere. Thanks

Answer 1

Something like this?

  ​$(​'#toggle-trigger')​​​​​​​​​​.click(function()
  {
    var $Current = $('.slide:visible');
    var $Slides = $('.slide');
    var $Next = $Current.next();
    if ($Next.length == 0) $Next = $Slides.first();
    $Slides.hide();
    $Next.show();
  });

I made a JSFiddle for it: http://jsfiddle.net/uxqBx/