highlighting next <dd> tag after clicking an anchor

Question

I'm using some code I found to highlight an id after clicking an anchor link.

I'd like to modify this to instead highlight the next <dd> tag in a definition list:

<dl class="mainfaq">
      <dt id="q1">Q1</dt>
         <dd><p>A1</p></dd>
      <dt id="q2">Q2</dt>
         <dd><p>A2</p></dd>
      <dt id="q3">Q3</dt>
         <dd><p>A3</p></dd>
</dl>

Here is the jquery from Lincoln Loop

    function highlight(elemId){
    var elem = $(elemId);
    elem.css("backgroundColor", "#ffffff"); // hack for Safari
    elem.animate({ backgroundColor: '#ffffaa' }, 1500);
    setTimeout(function(){$(elemId).animate({ backgroundColor: "#ffffff" }, 3000)},1000);
}

if (document.location.hash) {
    highlight(document.location.hash);
}
$('a[href*=#]').click(function(){
    var elemId = '#' + $(this).attr('href').split('#')[1];
    highlight(elemId);
});

I can't seem to get the usual .next or .sibling modifications to work.

Answer 1

I'd use the next adjacent sibling selector:

highlight(elemId + ' + dd');

Answer 2

I'm not entirely sure what you're trying to achieve, but assuming that you're clicking a link on the same page, and then trying to highlight the targeted element you could use a pure css solution:

:target + dd > p { /* css */ }

It should target the p that is a direct descendant of the dd which is the immediate sibling of a target-ed dt element.

There are some caveats to this approach, though; I cant' imagine that IE < 8 (and possibly including 8) will implement it properly. And it would almost certainly require a valid doctype.

Demo at jsbin: http://jsbin.com/oqamu4