title: Toggle Plus and Minus jQuery UI
body: <p>Is there a way to add a span of a + and - for this code? I'm having a tuff time getting it to work. I'd like it to be in the div when toggling back and forth. This code is working great but every time I alter the code it doesn't seem to work. :-/</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
        $( '.mylisting-trigger' ).click(function() {
        $( '.mylisting-main' ).toggle( 'blind', {direction: 'down'}, 200 );
          return false;
       });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the HTML I'm using. </p>
  
  <pre><code>&lt;div class="row mylisting"&gt;
  &lt;div class="twelve columns"&gt;
      &lt;div class="mylisting-header"&gt;
          &lt;a href="#" class="mylisting-trigger"&gt;&lt;h1&gt;my listing&lt;/h1&gt;&lt;h1&gt;&lt;span&gt;(24)&lt;/span&gt;&lt;/h1&gt;&lt;/a&gt;
      &lt;/div&gt;&lt;!--/mylisting-header--&gt;
      &lt;div class="mylisting-main"&gt;
          &lt;div class="mylisting-options"&gt;
              &lt;p&gt;
                  &lt;a href="#"&gt;Send&lt;/a&gt; 
                  &lt;a href="#"&gt;Rename&lt;/a&gt;
                  &lt;a href="#"&gt;Delete&lt;/a&gt;
              &lt;/p&gt;
          &lt;/div&gt;
              &lt;/div&gt;&lt;!--/.mylisting-main--&gt;
          &lt;/div&gt;&lt;!--/twelve columns--&gt;
       &lt;/div&gt;&lt;!--/row mylisting--&gt;
  </code></pre>