Bootstrap 3 Collapse - adding active class to open panel

Question

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

});

Oh, of course. The answer you selected as correct was already there when I commented. I've just informed you of a possible typo, not that the code was right. — thiagobraga
– thiagobraga, Commented Aug 23, 2014 at 3:49

Moshtaf · Accepted Answer · 2018-03-19 11:14:15Z

16

Try this:

$('.panel-heading a').click(function() {
    $('.panel-heading').removeClass('active');
    if(!$(this).closest('.panel').find('.panel-collapse').hasClass('in'))
        $(this).parents('.panel-heading').addClass('active');
});

Check JSFiddle Demo

Update 1: To set a panel as active by default on the first load, just add the active class manually to the panel-heading in HTML code.

Update 2: Although this answer is marked as accepted answer, I highly recommend to take a look at the Blizwire answer too.

edited Mar 19, 2018 at 11:14

answered Aug 23, 2014 at 3:19

Moshtaf

4,9132 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

thiagobraga Over a year ago

You can use $(this).parents('.panel-heading') instead of $(this).parent().parent().

chandan Over a year ago

Hi Moshtaf, A small addition could be helpful, the class needs to be loaded when the page loads

thiagobraga Over a year ago

What class? accordion-2?

thiagobraga Over a year ago

@chandan You can put this class directly in HTML to avoid more one JavaScript function and just use the function when the user clicks. Use <div class="panel-heading active"> for that panel you want.

chandan Over a year ago

Hi Moshtaf, oh yes I forgot, but I thought may be in could be done via js. Thank a ton.

|

Martin · Accepted Answer · 2016-05-16 02:43:28Z

14

The current answer (by Moshtaf) is using a standard click event. However, Bootstrap has a built-in event for opening/closing of collapsable items, as pointed out by Jurriaan, which is much safer to use (a click on the link doesn't necessarily mean that the panel is shown). Here's a clean solution, inspired by Jurriaan's solution, with minimal amount of code and jQuery selectors. http://codepen.io/martinkrulltott/pen/mPgYgQ

$(document).ready(function() {
  $('.panel-collapse').on('show.bs.collapse', function () {
    $(this).siblings('.panel-heading').addClass('active');
  });

  $('.panel-collapse').on('hide.bs.collapse', function () {
    $(this).siblings('.panel-heading').removeClass('active');
  });
});

answered May 16, 2016 at 2:43

Martin

1,9963 gold badges25 silver badges37 bronze badges

1 Comment

Mitrovic Srdjan Over a year ago

This is best approach since solution of Moshtaf is not working properly. When you click on same panel it does not change class.

Community · Accepted Answer · 2017-05-23 12:18:01Z

5

These answers didn't work for me for in some cases: Multiple panel groups on 1 page, or clicking on the same title to hide a panel. This adaption from https://stackoverflow.com/a/24033761/842740 works as a general solution and I added code for setting the default open panel on active state.

$('.panel-group .panel-collapse.in').prev().addClass('active');
$('.panel-group')
  .on('show.bs.collapse', function(e) {
    $(e.target).prev('.panel-heading').addClass('active');
  })
  .on('hide.bs.collapse', function(e) {
    $(e.target).prev('.panel-heading').removeClass('active');
  });

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Feb 5, 2015 at 10:24

Jurriaan Roelofs

4306 silver badges13 bronze badges

Comments

Syed · Accepted Answer · 2017-05-14 19:27:56Z

5

For someone who is looking for CSS solution and I tired this only in Bootstrap 4:

HTML

<a class="collapsed" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Open Collapse </a>

<div class="collapse" id="collapseExample">
  <div class="card card-block card-outline-primary">
    <h3 class="text-center">Date Goes Here</h3>
  </div>
</div>

CSS

[data-toggle="collapse"]:not(.collapsed) {
  background-color: blue;
}

answered May 14, 2017 at 19:27

Syed

16.6k15 gold badges128 silver badges159 bronze badges

Comments

idoliki · Accepted Answer · 2014-12-16 23:24:27Z

$(function() {
  $('.panel-heading').click(function() {
    if ($(this).hasClass('activestate')) {
      $(this).removeClass('activestate');
    } else {
      $('.panel-heading').removeClass('activestate');
      $(this).addClass('activestate');
    }
  });
});

a,
a:hover,
a:active,
a:focus {
  text-decoration: none !important
}
.panel-heading:hover,
.panel-heading:focus,
.panel-heading:hover a,
.panel-heading:focus a {
  color: #c9b27e;
  text-decoration: none !IMPORTANT;
}
.activestate {
  background-color: #c9b27e !IMPORTANT;
  color: white !important;
  display: block;
}
.activestate:hover a {
  color: black;
}
.panel-heading {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<div class="accordion-2 panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading activestate">
      <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 -->
</div>
<!-- /.accordion-2 -->

I think that this is more logical.

John Magnolia · Accepted Answer · 2018-11-26 11:40:46Z

1

All of the other answers require panel-heading. All this requires is the data-target.

$('[data-toggle=collapse]').each(function() {
    var $collapse_btn = $(this),
        $collapse_target =  $(this.getAttribute('data-target'));

    $collapse_target.on('show.bs.collapse', function () {
        $collapse_btn.addClass('collapsed');
    }).on('hide.bs.collapse', function () {
        $collapse_btn.removeClass('collapsed');
    });
});

answered Nov 26, 2018 at 11:40

John Magnolia

16.9k41 gold badges171 silver badges275 bronze badges

Collectives™ on Stack Overflow

Bootstrap 3 Collapse - adding active class to open panel

6 Answers 6

9 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related