Jquery toggle effect in IE 8 / 7 - accordion

Question

I am using the following jquery toogle function to show / hide a detailed list
$('dt').toggle(
function() {
$(this).next('dd').slideUp();
$(this).addClass('selectedArrow');
},
function() {
$(this).next('dd').slideDown();
$(this).removeClass('selectedArrow');
}
);
This adds the selectedArrow class on all browsers except IE7 and IE8, the reason for this class is that has a background image that changes depending on what state the toogle is in,
Any ideas how I can get it to add the class on IE7 / 8 or know of an alternative method of getting the same result.
Thanks for your help, managed to get it working in the end, turned out to be a background alignment issue of the arrows in my css

Answer 1

Your code works here in IE6 and IE9 and in IE9's compatibility mode that simulates IE7 and IE8 in this jsFiddle so I'm thinking that the issue has to do with something you're not disclosing to us about your actual page, either your HTML or something else about your code.
Here's what I used in my demo to show that it works:
HTML:
Click on Coffee or Milk<br><br>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
And, I used your exact code:
$('dt').toggle(
function() {
$(this).next('dd').slideUp();
$(this).addClass('selectedArrow');
},
function() {
$(this).next('dd').slideDown();
$(this).removeClass('selectedArrow');
}
);

Answer 2

Did you try another solution? Something like:
$('#dt').click(function(){
$(this).next('dd').slideToggle().toggleClass('selectedArrow');
});