chandan chandan - 6 months ago 31
HTML Question

Bootstrap 3 Collapse - adding active class to open panel

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


});

Answer

Try this:

jQuery('.panel-heading a').click(function() {
    $('.panel-heading').removeClass('actives');
    $(this).parents('.panel-heading').addClass('actives');
});

Check JSFiddle Demo

You can see in demo that after click on each panel, at the end of code, an alert show you the .attr('class') and it containts actives class that mean this class has been added successfully.

Update:

In order to add actives class to the open panel in the first load, you don't need any modification in JS code just add actives class to the panel-heading of default panel manually in HTML code.

Comments