Cycling Through Section tags: Stops After 2nd Section
<p>I have a group of section tags which I am trying to cycle through using jQuery:</p>

<pre><code>&lt;ul id="office-nav"&gt;
&lt;li class="prev"&gt;&lt;a href=""&gt;Previous&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Next Location&lt;/li&gt;
&lt;li class="next"&gt;&lt;a href=""&gt;Next&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;article id="offices"&gt;

&lt;section class="office1"&gt;
&lt;h3&gt;Office 1&lt;/h3&gt;
&lt;/section&gt;&lt;!--end office1--&gt;

&lt;section class="office2"&gt;
&lt;h3&gt;Office 2&lt;/h3&gt;
&lt;/section&gt;&lt;!--end office2--&gt;

&lt;section class="office3"&gt;
&lt;h3&gt;Office 3&lt;/h3&gt;
&lt;/section&gt;&lt;!--end office3--&gt;

&lt;/article&gt;&lt;!--end offices--&gt;
</code></pre>

<p>The CSS:</p>

<pre><code>#offices section{display:none;width:300px;height:300px;}
#offices section.office1{display:block;background-color:red;}
#offices section.office2{background-color:yellow;}
#offices section.office3{background-color:orange;}
</code></pre>

<p>Here is my jQuery:</p>

<pre><code>var visibleBox = $('#offices section:visible');
var nextToShow = $(visibleBox).next('section:hidden');

$("#office-nav li.next a").click(function(event) {
    visibleBox.hide();
    if (nextToShow.length &gt; 0) {
        nextToShow.show();
    } else {
        $('#offices section:hidden:first').show();
    }
    event.preventDefault();
});
</code></pre>

<p>This cycles up to <code>.office2</code> for me, but nothing past that. Also, how would I rewrite a reverse function to cycle backwards?</p>

<p>Fiddle here: <a href="http://jsfiddle.net/pwb6D/2/" rel="nofollow">http://jsfiddle.net/pwb6D/2/</a></p>
