title: Toggle between two classes in jQuery
body: <p>I'm trying to modify the icons for the <a href="http://jqueryui.com/demos/sortable/#portlets" rel="noreferrer">jQuery UI portlets</a>.  Rather than have a plus to minimize and a minus to expand, I wanted to switch them.  </p>
  
  <p>I've only had limited success with it where the first time to click the minus it flips to a plus, but the plus never flips to a minus.  Any help on this would be much appreciated.</p>
  
  <p>Here's a sample HTML:</p>
  
  <pre><code>&lt;script src="scripts/jquery-1.3.2.js" type="text/javascript" &gt;&lt;/script&gt;
  &lt;script src="scripts/ui/ui.core.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="scripts/ui/ui.sortable.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;div class="column"&gt;
      &lt;div class="portlet"&gt;
          &lt;div class="portlet-header"&gt;Links&lt;/div&gt;
          &lt;div class="portlet-content"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's what I came up with for the jQuery:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function() {
          $(".column").sortable({
              connectWith: '.column'
          });
  
          $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
          .find(".portlet-header")
              .addClass("ui-widget-header ui-corner-all")
              .prepend('&lt;span class="ui-icon ui-icon-minusthick"&gt;&lt;/span&gt;')
              .prepend('&lt;span class="ui-icon ui-icon-closethick"&gt;&lt;/span&gt;')
              .end()
          .find(".portlet-content");
  
          $(".portlet-header .ui-icon-minusthick").click(function() {
              $(this).removeClass("ui-icon-minusthick");
              $(this).addClass("ui-icon-plusthick");
              $(this).parents(".portlet:first").find(".portlet-content").toggle();
          });
  
          $(".portlet-header .ui-icon-plusthick").click(function() {
              $(this).removeClass("ui-icon-plusthick");
              $(this).addClass("ui-icon-minusthick");
              $(this).parents(".portlet:first").find(".portlet-content").toggle();
          });
  
          $(".portlet-header .ui-icon-closethick").click(function() {
              $(this).parents(".portlet:first").toggle();
          });
  
          $(".column").disableSelection();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><hr />
  <strong>EDIT</strong>: Here's the original javascript from the jQuery UI demo site:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() {
      $(".column").sortable({
          connectWith: '.column'
      });
  
      $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
          .find(".portlet-header")
              .addClass("ui-widget-header ui-corner-all")
              .prepend('&lt;span class="ui-icon ui-icon-plusthick"&gt;&lt;/span&gt;')
              .end()
          .find(".portlet-content");
  
      $(".portlet-header .ui-icon").click(function() {
          $(this).toggleClass("ui-icon-minusthick");
          $(this).parents(".portlet:first").find(".portlet-content").toggle();
      });
  
      $(".column").disableSelection();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm not exactly sure how they were able to get the plus and minus to toggle correctly.</p>