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

Reply via email to