Parent's Children

I have an accordian and I'm trying to access the parent of the open item and then the anchor child of that parent.

The accordian works just fine, but when it's active, I want the anchor tag in the dt to change colors as well.

HTML

<dl id="ann">
<dt><a href="javascript:void(0);">Sunday Click to Expand</a></dt>
<dd class="active">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt><a href="javascript:void(0);">Monday Click to Expand</a></dt>
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
<dt><a href="javascript:void(0);">Tuesday Click to Expand</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>
</dl>

jQuery

(function ($) {
var allPanels = $('#ann > dd').hide();
$('#ann dd.active').show();
    $('#ann > dt > a').click(function () {
        $this = $(this);
        $target = $this.parent().next();
        if (!$target.hasClass('active')) {
            allPanels.removeClass('active').slideUp();
            $target.addClass('active').slideDown();
//something here should target the anchor tag inside of the parent's dt to change the color when it is active
}
return false;
});
})(jQuery)

I'm guessing it has something to do with .parent()

Thanks!

Topic Participants