Hi, I am doing an Accordion using the screencast tutorial by John Resig. I already have the menu working but need to add flavor to it, first let me explain that I have added a span class in the dt like so:
<dt><a href="/"> <span>My Menu</span></a> </dt> The reason for it is because I have a background image for 'dt a', and I want to add another arrow up or down image in 'dt' so when the menu is visible, it shows 'arrow-up', otherwise 'arrow-down'. I have this for 'arrow-down' for hidden menu: dt a span {background: url(../images/base_images/icon-arrow-down.gif) no-repeat left center; padding-left: 20px;} but I don't know exactly where and how to addClass for 'selected' so that I can show the 'arrow-up'. Here is what I got but it added all 'dt a' a 'selected' class. jQuery(document).ready(function($){ $("dl#narrow-by-list> dd:not(:first)").hide(); $("dl#narrow-by-list> dt a").addClass('selected'); /how do I modify this line ? $("dl#narrow-by-list> dt a").click(function(){ $("dl#narrow-by-list> dd:visible").slideUp("slow"); $(this).parent().next().slideDown("slow"); return false; }); }); Any pointer is greatly appreciated. sutra