[jQuery] Selecting the current (this) dt on a collapsible menu

I adapted John's example of a collapsible menu but have a problem
selecting the current dt.

John's example can be found at: http://jquery.com/files/demo/dl-done.html

I pretty much has this so far:

<pre>
<script>
                $(document).ready(function(){
                $("div#Kcleftnav dt").addClass("productList");
                $("div#Kcleftnav dd").hide();
                $("div#Kcleftnav dt a").click(function(){
                        $("div#Kcleftnav
dt:first").removeClass("productList").addClass("menuSelected");
                        $("div#Kcleftnav dd:visible").slideUp("normal");
                        $(this).parent().next().slideDown("normal");
                return false;
                        });

        });
        </script>
</pre>

As you can see on the fifth line, I remove the existing class that I
assigned to the menu and change the class so I can add a different
icon to the current dt tag. unfortunately I don't know how to say,
"only do it to this dt"

I also ran into the problem if once I think on another title (dt) the
previous one remains with the unchange icon, which looks like it's
open but is not.

Pretty much I only wanted to add a plus and minus to the left of each
dt on John's example.

I know I right now say on line 5: "div#Kcleftnav dt:first", and is
not :first that I need but something like :this, I even tried but it
doesn't work, I also changed the whole "div#Kcleftnav dt:first" for
(this) but it didn't work either.

"div#Kcleftnav dt:first" seems to be the closes to what I want but
only work and changes the icon on the first dt of the list, I want it
to be the one that they click, no just the first one.

Any help with me appreciated guys,

thanks!


J.