Cycle through div's (jump to 1st when leaving the last)
Problem and goal
I'm trying to cycle through some div's at the bottom of my page. The arrow on the right shows the next div and hides the current one. Where I'm stuck is getting the script to display the first div again when the last one is visible (after clicking ofcourse). I'm trying to cycle the whole thing, but I don't know how to achieve this.
Website:
Sorry, had to remove the link due to indexing problems with Google
HTML
-
<div id="details">
<div class="u-detail green">
<h3>Perfect Built-in</h3>
<div>
<p>Text.</p>
</div>
</div>
<div class="u-detail orange">
<h3>Uniek detail 2</h3>
<div>
<p>Text.</p>
</div>
</div>
<div class="u-detail darkblue">
<h3>Uniek detail 3</h3>
<div>
<p>Text.</p>
</div>
</div>
<a href="#" title="volgend detail" class="next">volgende</a>
</div>
Jquery
-
$(document).ready(function()
{
$(document).ready(function() {
// Hide every div except the first one
$('.u-detail:not(:first)').hide();
});
$('.next').click(function () {
// Show the next div when we click the link
$('.u-detail:visible').next().show('slow');
// Hide the current div when we click the link
$('.u-detail:visible').hide();
});
});