How to next() until no further items, then return to original state of listed items
<p>I am almost there with the script I am writing, but once I reach the end of the list, I need a way to know that I have reached the end and that next button needs to take me back to the list and add .itemBox and itemHeader classes back to their respective elements. Here is the code I have so far:</p>

<pre><code>&lt;code&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;script&gt;var itemText = $('div.itemDescription').children().not('h3');
        //hide item text when page loads.
        itemText.hide();
        //set all div.itemDescriptions to have Aria-expanded attribute set to false.
        var itemDivs = $('div.itemDescription');
        for(i=0;i&lt;itemDivs.length;i++)
        {
            $(itemDivs[i]).attr("aria-expanded",false);
        }
        var resetBox = itemDivs;
        //when user clicks link, have the benefit text appear if hidden and hide if shown.
        $('h3.itemHeader').click(function(){
            var theDiv = $(this).closest('div.itemDescription');
            var itemContent = theDiv.children().not('h3');
            itemContent.show();
            $(this).addClass('expanded');

            //when expanded, set ARIA expanded to true; Set to FALSE when not expanded.
            if($(this).hasClass('expanded'))
            {
                $(this).parent().attr("aria-expanded",true);
                //remove class from h3
                $(this).removeClass('itemHeader');
                //unbind to stop further clicks on h3
                //$(this).unbind('click');
                theDiv.parent().removeClass('itemBox');
                theDiv.prevAll().hide();
                theDiv.nextAll().hide();

            }
            else if ($(this).hasClass('expanded')==false)
            {
                $(this).parent().attr("aria-expanded",false);
                $(this).removeClass('expanded');

            }
        })//end click.

        // next button functionality
        $('a.btn-next').click(function(){


            //hide current div
            $(this).parents('div.itemDescription').hide();

            //assign variable to next header and show
            var nextItem = $(this).parents('div.itemDescription').next();


                nextItem.show();
                //expand contents of next div
                nextItem.attr("aria-expanded",true);
                nextItem.children('h3').removeClass('itemHeader');

                nextItem.children().show();

        })//end next click

        $('a.btn-prev').click(function(){

            //hide current div
            $(this).parents('div.itemDescription').hide();

            //assign variable to next header and show
            var prevItem = $(this).parents('div.itemDescription').prev();
            prevItem.show();

            //expand contents of next div
            prevItem.attr("aria-expanded",true);
            prevItem.children('h3').removeClass('itemHeader');

            prevItem.children().show();

        })//end prev click
&lt;/script&gt;
&lt;style&gt;
.itemBox {
    border: 1px solid #333;
    padding: 2em;
}
.itemHeader {
    color: blue;
    text-decoration: underline
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div class="itemBox"&gt;
&lt;div class="itemDescription"&gt;
    &lt;h3 class="itemHeader" tabindex="0"&gt;Header 1&lt;/h3&gt;
    &lt;div class="itemText"&gt;
        Text
        &lt;a href="#" class="btn-prev"&gt;Previous&lt;/a&gt;
        &lt;a href="#" class="btn-next"&gt;Next&lt;/a&gt;
    &lt;/div&gt;&lt;!-- /.itemText --&gt;
&lt;/div&gt;
&lt;div class="itemDescription"&gt;
    &lt;h3 class="itemHeader" tabindex="0"&gt;Header 2&lt;/h3&gt;
    &lt;div class="itemText"&gt;
        Text
        &lt;a href="#" class="btn-prev"&gt;Previous&lt;/a&gt;
        &lt;a href="#" class="btn-next"&gt;Next&lt;/a&gt;
    &lt;/div&gt;&lt;!-- /.itemText --&gt;
&lt;/div&gt;
&lt;div class="itemDescription"&gt;
    &lt;h3 class="itemHeader" tabindex="0"&gt;Header 3&lt;/h3&gt;
    &lt;div class="itemText"&gt;
        Text
        &lt;a href="#" class="btn-prev"&gt;Previous&lt;/a&gt;
        &lt;a href="#" class="btn-next"&gt;Next&lt;/a&gt;
    &lt;/div&gt;&lt;!-- /.itemText --&gt;
&lt;/div&gt;
&lt;div class="itemDescription"&gt;
    &lt;h3 class="itemHeader" tabindex="0"&gt;Header 4&lt;/h3&gt;
    &lt;div class="itemText"&gt;
        Text
        &lt;a href="#" class="btn-prev"&gt;Previous&lt;/a&gt;
        &lt;a href="#" class="btn-next"&gt;Next&lt;/a&gt;
    &lt;/div&gt;&lt;!-- /.itemText --&gt;
&lt;/div&gt;
&lt;div class="itemDescription"&gt;
    &lt;h3 class="itemHeader" tabindex="0"&gt;Header 5&lt;/h3&gt;
    &lt;div class="itemText"&gt;
        Text
        &lt;a href="#" class="btn-prev"&gt;Previous&lt;/a&gt;
        &lt;a href="#" class="btn-next"&gt;Next&lt;/a&gt;
    &lt;/div&gt;&lt;!-- /.itemText --&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.itemBox --&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;/code&gt;
</code></pre>
