Simple #next #prev function

by MrTest

HTML

<a href="#" id="prev">Prev</a> / <a href="#" id="next">Next</a>

<br /><br />
<ul id="list">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
</ul>

CSS

.hidden { display: none;}
.visible { display: block;}

JavaScript

$('#list li').addClass('hidden'); //hide all list-items
$('#list li:first-child').addClass('visible'); //show first list-item

$('#prev').click(function() { //when clicked #prev
    if ($('.visible').is(':first-child')) {
        //if the first list item is visible find last and make it visible
        $('#list li:last-child').addClass('visible');
        $('#list li:first-child').removeClass('visible').addClass('hidden');
    }
    else {
        //otherwie
        $('.visible').prev().addClass('visible');
        $('.visible').next().removeClass('visible').addClass('hidden');
    }
});

$('#next').click(function() { //when clicked #next
    if ($('.visible').is(':last-child')) {
        //if the first last item is visible find first and make it visible
        $('#list li:first-child').addClass('visible');
        $('#list li:last-child').removeClass('visible').addClass('hidden');
    }
    else {
        //otherwise
        $('.visible').next().addClass('visible');
        $('.visible').prev().removeClass('visible').addClass('hidden');
    }
});