firstly here's the fiddle: http://jsfiddle.net/krish7878/h38jn324/

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'.

I found similar question but none of those solutions seem to work (strangely). Any help would be appreciated.

HTML Code:

<div class=accordion-2 panel-group id=accordion>

    <div class=panel panel-default>

        <div class=panel-heading>

            <h4 class=panel-title>

                <a data-toggle=collapse data-parent=#accordion href=#collapseOne>

                    Our Mission

                </a>

            </h4>

        </div><!-- /.panel-heading -->

        <div id=collapseOne class=panel-collapse collapse in>

            <div class=panel-body>

                <p>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.</p>

            </div>

        </div><!-- /#collapseOne -->

    </div><!-- /.panel -->

<div class=panel panel-default>

    <div class=panel-heading>

        <h4 class=panel-title>

            <a data-toggle=collapse data-parent=#accordion href=#collapseTwo>

                Success Stories

            </a>

        </h4>

    </div><!-- /.panel-heading -->

    <div id=collapseTwo class=panel-collapse collapse>

        <div class=panel-body>

            <p>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.</p>

        </div><!-- /.panel-body -->

    </div><!-- /#collapseTwo -->

</div><!-- /.panel -->

<div class=panel panel-default last>

    <div class=panel-heading>

        <h4 class=panel-title>

            <a data-toggle=collapse data-parent=#accordion href=#collapseThree>

                Our Story

            </a>

        </h4>

    </div><!-- /.panel-heading -->

    <div id=collapseThree class=panel-collapse collapse>

        <div class=panel-body>

            <p>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.</p>

        </div><!-- /.panel-body -->

    </div><!-- /#collapseTwo -->

</div><!-- /.panel -->

JS 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');

});