title: Bootstrap: Change Color of Panel Heading onClick
body: <p>Hi I gave myself a crash course in bootstrap last night and I'm having a lot of fun with it. I found online a collapsible panel that works really well for what I am hoping to achieve in my navbar. However I want the background color of the panel heading to change when expanded. I am not familiar enough with the inner workings of bootstrap yet to noodle it out on my own (soon! I hope). Code in question is below:</p>
  
  <pre><code>            &lt;div class="panel-group minmarg" id="accordion"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
                          OPI&lt;b class="caret"&gt;&lt;/b&gt;
                      &lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapseOne" class="panel-collapse collapse"&gt;
                  &lt;div class="panel-body minmarg"&gt;
                      &lt;ul class="nav nav-pills nav-stacked pill-trngtheme minmarg"&gt;
                          &lt;li role="presentation"&gt;&lt;a href="#"&gt;OPI Main Site&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Training&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a href="#"&gt;Procedures&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a href="#"&gt;Corrective Action&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a href="#"&gt;Human Performance Improvement&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a href="#"&gt;LEAN Management&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a href="#"&gt;Coduct of Operations&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>