Display one list element at a time using jQuery; "Previous" link broken
<p>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.</p>

<p>HTML:</p>

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

<p>CSS:</p>

<pre><code>.event_months .noShow {
    display:none;
}

.event_months .doShow {
    display:inline;
}

.event_months .first {
    display:inline !important;
​} 
</code></pre>

<p>jQuery:</p>

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

    $("a.next").click(function() {
        $('.first').toggleClass("first");
        var $toHighlight = $('.doShow').next().length &gt; 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 &gt; 0 ? $('.doShow').prev() : $('#event_months li').last();
        $('.doShow').removeClass('doShow');
        $toHighlight.addClass('doShow');
    });

}); 
&lt;/script&gt;​​​​​​
</code></pre>
