title: Twitter bootstrap collapse: change display of toggle button
body: <p>I am using Twitter Bootstrap to create collapsible sections of text. The sections are expanded when a <code>+</code> button  is pressed. My html code as follows:</p>
  
  <pre><code>&lt;div class="row-fluid summary"&gt;
      &lt;div class="span11"&gt;
          &lt;h2&gt;MyHeading&lt;/h2&gt;  
      &lt;/div&gt;
      &lt;div class="span1"&gt;
          &lt;button type="button" class="btn btn-success" data-toggle="collapse" data-target="#intro"&gt;+&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row-fluid summary"&gt;
      &lt;div id="intro" class="collapse"&gt; 
          Here comes the text...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to change the button to display <code>-</code> instead of <code>+</code> after the section is expanded (and change back to <code>+</code> when it is collapsed again)?</p>
  
  <p><strong>Additional information</strong>: I hoped there would be a simple twitter-bootstrap/css/html-based solution to my problem. All responses so far make use of JavaScript or PHP. Because of this I want to add some more information about my development environment: I want to use this solution inside a SilverStripe-based (version 3.0.5) website which has some implications for the use of both PHP as well as JavaScript.</p>