title: Jquery accordion button toggle
body: <p>I have a table, and in the table there are hidden rows (with a div inside) that expand when the user clicks on 'edit user'. I have got it to display only one of these rows at once, however I need the button to update from saying 'edit user' to 'close', but only for the row that is open. So when a user clicks on another 'edit user' button, the one that was open closes, and the button text (and span icon) changes back to what it was originally, and the row that is open updates to 'close', etc. Hope I've made this clear.</p>
  
  <p>I have tried using toggle but I can't seem to figure it out. I am very new to Jquery and this seems a bit too advanced for my skills at the moment!</p>
  
  <p>Here's my Jquery so far:</p>
  
  <pre><code>$(function() {
  $.fn.slideFadeToggle  = function(speed, easing, callback) {
      return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
  };
      $('tr:nth-child(4n)').addClass("zebra")
      .prev().addClass("zebra")
      .prev().addClass("normal")
      .prev().addClass("normal");
      $('.hidden-user').hide()
  
  $('td .button-small').click(function(e) {
      e.preventDefault();
      e.stopPropagation();
      var toggledelement = $(this).closest('tr').next().find('.hidden-user');             
      $(toggledelement).slideFadeToggle('slow');
      $('.hidden-user').not(toggledelement).slideUp('slow');
  
  });
  
  });
  </code></pre>
  
  <p>There's a link to jsfiddle here, I've included most of the css and html that I'm using in the project.</p>
  
  <p><a href="http://jsfiddle.net/hssay/" rel="nofollow">http://jsfiddle.net/hssay/</a></p>