title: Bootstrap 3 Collapse - adding active class to open panel
body: <p>firstly here's the fiddle: <a href="http://jsfiddle.net/krish7878/h38jn324/">http://jsfiddle.net/krish7878/h38jn324/</a></p>
  
  <p>Simple question when a panel is clicked (and it expands to show it's respective content), a class 'active' needs to be added to 'panel-heading'. </p>
  
  <p>I found similar question but none of those solutions seem to work (strangely). Any help would be appreciated. </p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div class="accordion-2 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 data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
                      Our Mission
                  &lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;&lt;!-- /.panel-heading --&gt;
          &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /#collapseOne --&gt;
      &lt;/div&gt;&lt;!-- /.panel --&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="#collapseTwo"&gt;
                  Success Stories
              &lt;/a&gt;
          &lt;/h4&gt;
      &lt;/div&gt;&lt;!-- /.panel-heading --&gt;
      &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
              &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.&lt;/p&gt;
          &lt;/div&gt;&lt;!-- /.panel-body --&gt;
      &lt;/div&gt;&lt;!-- /#collapseTwo --&gt;
  &lt;/div&gt;&lt;!-- /.panel --&gt;
  &lt;div class="panel panel-default last"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h4 class="panel-title"&gt;
              &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"&gt;
                  Our Story
              &lt;/a&gt;
          &lt;/h4&gt;
      &lt;/div&gt;&lt;!-- /.panel-heading --&gt;
      &lt;div id="collapseThree" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
              &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.&lt;/p&gt;
          &lt;/div&gt;&lt;!-- /.panel-body --&gt;
      &lt;/div&gt;&lt;!-- /#collapseTwo --&gt;
  &lt;/div&gt;&lt;!-- /.panel --&gt;
  </code></pre>
  
  <p></p>
  
  <p>JS Code: </p>
  
  <pre><code>jQuery('.accordion-2 .panel-heading a[data-toggle="collapse"]').on('click', function () {   
  jQuery('.accordion-2 .panel-heading a[data-toggle="collapse"]').removeClass('actives');
  $(this).addClass('actives');
  </code></pre>
  
  <p>});</p>