Toggle jQuery-UI widgets

Question

I have:

<div class="ui-widget">
   <div class="ui-widget-header">
      <span class="ui-icon ui-icon-circle-triangle-n">My Menu</span>
   </div>
   <ul class="ui-widget-content">
      <li>Menu Item 1</li>
      <li>Menu Item 2</li>
      <li>Menu Item 3</li>
   </ul>
</div>

My jQuery is:

$('.ui-widget-header').click(function() {
   $('.ui-widget-header+ul').toggle('slow');        
});

Q: How do I toggle classes between ui-icon-circle-triangle-n and ui-icon-circle-triangle-s as the user clicks on .ui-widget-header?

Answer 1

Simplest way to do it would be to use .toggleClass()

$('.ui-widget-header').click(function() {
   $('.ui-widget-header+ul').toggle('slow');
   $('.ui-icon', this).toggleClass('ui-icon-circle-triangle-n ui-icon-circle-triangle-s');        
});