Question

I’m trying to use one button to show/hide through an un-order list of elements in a looping fashion. Page loads, first element is shown, click button, shown element is hidden and the next is shown… kinda like clicking next in a slideshow. The problem is I don’t know how to stop or reset the click function after the first if statement. Triggering the function now rips through them all. Can someone take a look at my code and give me a hand please?

var daily = '.daily_goal_activity li';   

$(daily).addClass(function (index) {
        return "item-" + index;
    });
    $('.item-0').show();
});

$('#activity_toggle').click(function () {
    $(daily).hide();

    if ($(daily).hasClass('item-0')) {
        $('.item-1').show();
    }
    if ($(daily).hasClass('item-1')) {
        $('.item-2').show();
    }
});

Answer 1

If they are list elements, then they are siblings, right?

You can just get a reference to the currently visible element, hide it and show the next sibling.

Assuming all list elements are initially hidden, and only the element with the class current is visible, then it would be something like:

var $daily = $('.daily_goal_activity li');
$daily.first().addClass('current');

$('#activity_toggle').click(function () {
    $daily.filter('.current')
      .removeClass('current')
      .next('li').addClass('current');
});

If you want to cycle through the elements, you can check whether there actually is a next sibling and if not, go back to the first one:

var $next = $daily.filter('.current')
    .removeClass('current')
    .next('li');

if($next.length === 0) {
    $next = $daily.first();
}

$next.addClass('current');

DEMO