title: bootstrap collapse: change display of toggle button icons and text
body: <p>I am using Twitter Bootstrap to create collapsible sections of text. The sections are expanded when a + button is pressed. My html code as follows:</p>
  
  <p><strong><a href="http://jsfiddle.net/baishi/bE3Bw/1/" rel="noreferrer">Demo link</a></strong></p>
  
  <pre><code>&lt;div class="panel-group" id="accordion"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"&gt;
            &lt;span class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt; Open
          &lt;/button&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="demo" class="panel-collapse collapse in"&gt;
        &lt;div class="panel-body"&gt;
          Contents:Thank you to help me solve the problem, you're a great guy!
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Later, i need to change text, button icons and expand.</strong></p>
  
  <p>Is Open:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"&gt;
    &lt;span class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt; Close
  &lt;/button&gt;
  </code></pre>
  
  <p>Is Close:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"&gt;
    &lt;span class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt; Open
  &lt;/button&gt;
  </code></pre>