I created a container div with three inner divs, each having a class of "content" and one of them having a class of "current". My goal was to display only one ".content" at a time and have a "next" button that hides the current div, removes the "current" class, and adds it to the next one. Everything seemed to work well until I reached the end of the divs. I wanted it to loop back to the first one but the code didn't achieve that. The first one shows up fine, but the next button stops functioning after:
Here is the JavaScript code snippet:
var $ = jQuery
$( document ).ready( function() {
$('#next').click(function(){
var item = $('.content.current');
item.removeClass('current');
item.slideUp();
item.next().addClass('current');
if(item.next().length == 0) {
$('.content').first().slideDown().addClass('current').end();
}
})
})
And here is the structure of the HTML:
<div id="holder">
<a class="btn btn-warning next" id="next">Next</a>
<div class="wrap">
<div class="content current">
<div id="header"><h3>Basic</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li>$4/month</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>Professional</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>St. Joseph</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
</div>
<!-- .wrap -->
</div>
<!-- holder -->