Question

I am wanting to display one list element at a time. Ideally, the first list element would be showing when the user opens the page. When the user clicks the “next” button the first list element will disappear and the second one will appear. When the user clicks the “previous” button the previous element will be shown. So far, the next button works just fine but the previous button scrolls through the li elements but continues on to the link elements, which is not suppose to happen. Here is the code I am using.

HTML:

<div class="event_months">
    <a class="prev" href="#">&#60;</a>
    <a class="next" href="#">&#62;</a>
    <li>one</li>
    <li>two</li>
</div>

CSS:

.event_months .noShow {
    display:none;
}

.event_months .doShow {
    display:inline;
}

.event_months .first {
    display:inline !important;
​} 

jQuery:

<script type = "text/javascript" > $('document').ready(function() {
    $(".event_months li:nth-child(3)").addClass("doShow");

    $("a.next").click(function() {
        $('.first').toggleClass("first");
        var $toHighlight = $('.doShow').next().length > 0 ? $('.doShow').next() : $('.event_months li').first();
        $('.doShow').removeClass('doShow');
        $toHighlight.addClass('doShow');
    });

    $("a.prev").click(function() {
        $('.first').toggleClass("first");
        var $toHighlight = $('.doShow').prev().length > 0 ? $('.doShow').prev() : $('#event_months li').last();
        $('.doShow').removeClass('doShow');
        $toHighlight.addClass('doShow');
    });

}); 
</script>​​​​​​

Answer 1

The reason why the next work and not the previous is because .prev() on the first item will give you the anchor tag before it, use a selector in prev for it to work

$(".event_months li:nth-child(3)").addClass("doShow");

$("a.next").click(function() {
    $('.first').toggleClass("first");
    var $toHighlight = $('.doShow').next('li').length > 0 ? $('.doShow').next('li') : $('.event_months li').first();
    $('.doShow').removeClass('doShow');
    $toHighlight.addClass('doShow');
});

$("a.prev").click(function() {
    $('.first').toggleClass("first");
    var $toHighlight = $('.doShow').prev('li').length > 0 ? $('.doShow').prev('li') : $('.event_months li').last();
    $('.doShow').removeClass('doShow');
    $toHighlight.addClass('doShow');
});

FIDDLE