Targeting Next Div Element in Jquery
<p>Here is the HTML</p>

<pre><code>&lt;a style="border: medium none; display: block;" class="agendaNav" href="#"&gt;&lt;img class="rightArrow" src="/images/arrowdown.png"&gt; WEEK AT A GLANCE&lt;/a&gt;

&lt;div class="agendaDay"&gt;

  Content In Here

&lt;/div&gt;
</code></pre>

<p>The Same link / class is repeated several times and I use the following JQuery:</p>

<pre><code>$('.agendaNav').click(function(event){
    event.preventDefault();
    if($(this).find('.rightArrow').attr('src')=='/images/arrowdown.png'){
        $(this).find('.rightArrow').attr('src', '/images/arrowright.png');
        $(this).attr('style', 'border-bottom: 1px solid #fff; display: block;');
    } else {
        $(this).find('.rightArrow').attr('src', '/images/arrowdown.png');
        $(this).attr('style', 'border: none; display: block;');
    }
    $('.agendaDay').toggle('fast');
});
</code></pre>

<p>If you take a look here:</p>

<p><a href="http://icuc2011.com/agenda" rel="nofollow">http://icuc2011.com/agenda</a></p>

<p>You'll see that it changes every class of agendaDay which makes sense, but I only want to change the one directly after the 'a' tag that was clicked, I tried this:</p>

<pre><code>$(this).next('.agendaDay').toggle('fast');
</code></pre>

<p>But then the arrow changes but the div of class agenda day doesn't change at all, what am I doing wrong?</p>
