Problems traversing through definition list by index
<p>I have a definition list containing the 12 months of the year. I have 3 months showing at a time for example (January, February, March). My goal is to have the list advance to the next month when the last child is clicked. For example when March is clicked, April will appear and January would disappear showing (February, March, and April), so on and so forth. </p>

<p>Here's my HTML</p>

<pre><code>&lt;div id="archive" class="archive"&gt;
    &lt;div&gt;Archive&lt;/div&gt;
    &lt;dl&gt;
        &lt;dt&gt;January&lt;/dt&gt;
        &lt;dt&gt;February&lt;/dt&gt;
        &lt;dt&gt;March&lt;/dt&gt;
        &lt;dt&gt;April&lt;/dt&gt;
        &lt;dt&gt;May&lt;/dt&gt;
        &lt;dt&gt;June&lt;/dt&gt;
        &lt;dt&gt;July&lt;/dt&gt;
        &lt;dt&gt;August&lt;/dt&gt;
        &lt;dt&gt;September&lt;/dt&gt;
        &lt;dt&gt;October&lt;/dt&gt;
        &lt;dt&gt;November&lt;/dt&gt;
        &lt;dt&gt;December&lt;/dt&gt;
    &lt;/dl&gt;
&lt;/div&gt;
</code></pre>

<p>and here's the jQuery code</p>

<pre><code>$(document).ready(function() {
$("#archive dl dt:gt(2)").hide();

$("#archive dl dt").each(function(index, value) {
        $(this).click(function() {
            if ($("#archive dl dt:visible").size() == (index + 1)) {
                $(this).next("dt").show(500);
                $("#archive dl dt:eq(" + (index - 2) + ")").hide(500);
            }
        });
    });
});
</code></pre>

<p>and I also have a jfiddle link:
<a href="http://jsfiddle.net/jdwalker/y5ngh/2/" rel="nofollow">Live Example</a></p>

<p>The problem I'm having is that it only works once. When April is clicked, nothing happens. I don't get any errors on the debugging console either. </p>

<p>Any help is appreciated. Thanks.</p>
