slideToggle with data from database

I have a page getting its data externaly. Within in 开发者_开发知识库each table row produced I am inserting a drop down with further options. These drop downs stay visible until the link is clicked again OR the user clicks off page. Got this to work, however, if the selected sub menu is down (Shown) and the user clicks the next rows option I get two drop downs, ie, the original doesn't toggle back up!

Jquery I'm using is:

var userRef = "tr." + userId

$(userRef + "ul.topnav a.sacton").click(function(e) { 

    $(this).parent().find("ul.subnav").slideToggle('medium');

 e.stopPropagation();

And an example of the htmL IS:

<tr class="<%=userId%>">
   <td>Some data</td>
   <td>
     <ul class=topnav>
      <li><a href="" class="sacton">Open me</a>
        <ul class="subnav">
          <li>Hidden stuff</li>
        </ul>
      </li>
    </ul>
  </td>
</tr>

and so on.

I need to trigger the toggle on the new row AND close the toggle on the previous.

Ok, first you can select every item that is not the current one. so, in your click function:

$('ul.subnav:not(.' + userRef + ')').hide(); //or whatever your hidding method is
$(this).parent().find("ul.subnav").slideToggle('medium');

Your demo script seems slightly malformed so I'm going to take my best guess here. A couple of problems I'm noticing include the fact that there's a missing semi-colon from your first line of execution, you're not building your selector correctly because it's missing a leading space in the concatenation, and your traversal looks as if it may be off:

var userRef = "tr." + userId;

$(userRef + " ul.topnav a.sacton").click(function(e) {
    e.stopPropagation();

    // A reference for inside the animation callback
    var that = this;

    // Slide up the currently visible subnav
    $("ui.subnav:visible", $(this).closest(userRef)).slideUp("slow", function() {

        // Callback after slideUp is complete
        $(that).siblings("ul").slideDown("slow");
    });
});