Question

Here is the HTML

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

<div class="agendaDay">

  Content In Here

</div>

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

$('.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');
});

If you take a look here:

http://icuc2011.com/agenda

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:

$(this).next('.agendaDay').toggle('fast');

But then the arrow changes but the div of class agenda day doesn’t change at all, what am I doing wrong?

Answer 1

Your example doesn’t match your actual code. In your code the link is inside a p tag. The div is a sibling following this p tag. If this is consistently the way it works, then you want:

$(this).parent().next('.agendaDay').toggle();