more questions on xml and toggle

more questions on xml and toggle

I am reading xml just fine and displaying embedded<li> selectively using toggle().  I would like to diplay a plus sign next to items that haven't been expanded, and a minus sign to indicate that something can be collapsed after it has been expanded. I can show a plus sign easy. I can even show a minus sign, but it get s applied to all the <li> and I can't seem to get it to switch back to plus either. I have tried to accomplish this by writing various iterations of a function inside toggle.  I would call this code below a success if it only applied to the list item that I clicked on,  and obviously if the class minus was removed on the even clicks.

  1. $('#nodes').html(html).
        on('click', '> ul > li', function() {

  2.         $(this).find('ul').toggle(function(){
             


  3.              $('ul').addClass('minus');
               
                });
        }).
        find('ul ul').hide();





Here is the generic form of the html:

  1. <ul class="outer">
  2. <li></li>
  3.       <ul class="detail">
  4.       <li></li>
  5.       </ul>
  6. </ul>


I have tried evaluating if showOrHide is true and changing the class based on that, but apparently you can't do that.  Also it seems that 'this' refers to all list items. So if I refer to 'this' the minus class gets added to all the embedded ul. I had a brain storm where I suddenly thought this would work, I was sure of it.

  1. $(this).find('.outer').addClass('minus')

Nope, doesn't look like it did anything.

Thanks for any suggestions.