title: How to add an 'on-click' background change
body: <p>I am basically using this - <a href="http://jsfiddle.net/navjottomer/8u57u/4/" rel="nofollow">http://jsfiddle.net/navjottomer/8u57u/4/</a> and also using Bootstrap's panel styles. </p>
  
  <p>I want it to look more like this though - <a href="https://support.google.com/mail#topic=" rel="nofollow">https://support.google.com/mail#topic=</a></p>
  
  <p>I have no idea where to start in terms of changing the colour of the panel-heading on open / active / expanded. You can see in the example that it starts white, and changes to dark grey on expand.</p>
  
  <p>Any info would be great!</p>
  
  <p>Here's my current mock up:</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;a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1"&gt;&lt;i class="fa fa-plus text-primary"&gt;&lt;/i&gt; Overview&lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="panel1" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;
                  content here
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
                  &lt;a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"&gt;&lt;i class="fa fa-plus text-primary"&gt;&lt;/i&gt; Utilities&lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="panel2" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;Contents panel 2&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
                  &lt;a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"&gt;&lt;i class="fa fa-plus text-primary"&gt;&lt;/i&gt; Organization&lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="panel3" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;Contents panel 3&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>