title: jQuery slideToggle - adding changing icon after title
body: <p>I'd like to change some of my text whenever slideToggle is activated.</p>
  
  <p>I have a text when the toggle is closed and I want to add a + (plus) sign at the end of it. I want that sign to change to a - (minus) when the toggle is open.</p>
  
  <p>I've tried it with the following code, but I couldn't find a way to add the plus/minus signs since there is no css change when the toggle opens/closes.</p>
  
  <p>jQuery:</p>
  
  <pre><code>$(window).load(function(){
  $(".header").click(function () {
      $header = $(this);
      $content = $header.next();
      $content.slideToggle(500, function () {
          $header.text(function () {
              return $content.is(":visible") ? "TITLE" : "TITLE";
          });
      });
  });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="header"&gt;&lt;span&gt;TITLE&lt;/span&gt;&lt;/div&gt;
  &lt;div class="content"&gt;&lt;p&gt;Expanded text&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.header {
      background-color: #dc0032;
      padding: 20px;
      cursor: pointer;
      color: #fff;
  }
  </code></pre>