title: Bootstrap 3 accordion styling on open/closed
body: <p>Trying to stylize bs3 accordions... I had added an image to the title and the body.  I have managed to set black title text on close and blue text on hover and/or open.</p>
  
  <p>How can I change the background color of 'panel-heading' on hover and/or open?  I have tried quite a few things with no results.  Is this going to be a jquery only solution by adding/removing the styles?</p>
  
  <pre><code>&lt;div class="panel panel-faq"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h4 class="panel-title"&gt;
              &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_2"&gt;
                  1. Some title goes here
              &lt;/a&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="accordion1_2" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
                  sample entry text goes here
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  .panel-faq{
      border-color: #dddddd;
  }
  .panel-faq .panel-heading {
      color: #333333;
      background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center;
      padding-left: 45px;
      border-color: #dddddd;
  }
  
  .panel-default &gt; .panel-heading + .panel-collapse .panel-body {
    border-top-color: #dddddd;
  }
  
  .panel-default &gt; .panel-footer + .panel-collapse .panel-body {
    border-bottom-color: #dddddd;
  }
  
  .panel-faq .panel-body {
      background: url('/assets/img/faq-answer.png') no-repeat 40px 20px;
      padding-left: 75px;
  }
  
  .panel-faq .accordion-toggle, .panel-faq a.accordion-toggle:hover{
      color:#428bca;
      text-decoration:none;
  }
  
  .panel-faq .accordion-toggle.collapsed {
      color:#333333;
  }
  </code></pre>