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, Aug 23 '14 at 03:49

Moshtaf · Accepted Answer · 2018-03-19T11:14:15.563

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 '18 at 11:14

answered Aug 23 '14 at 03:19

Moshtaf

4,833
2
24
34

You can use `$(this).parents('.panel-heading')` instead of `$(this).parent().parent()`. – thiagobraga Aug 23 '14 at 03:27
Hi Moshtaf, A small addition could be helpful, the class needs to be loaded when the page loads – chandan Aug 23 '14 at 03:46
What class? `accordion-2`? – thiagobraga Aug 23 '14 at 03:50
1

@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 `
` for that panel you want.
– thiagobraga Aug 23 '14 at 03:55
Hi Moshtaf, oh yes I forgot, but I thought may be in could be done via js. Thank a ton. – chandan Aug 23 '14 at 04:09
@chandan: it could be done using JS, you can use this on first load: `$('.panel-collapse .collapse .in').parent().children('.panel-heading').addClass('actives');`. but really it's not the best soulution, the best solution as mentioned is add class manually. – Moshtaf Aug 23 '14 at 04:12
This solution could fail if there are multiple ways to open and close a collapsable element (outside of just clicking the targeted 'a' element). Bootstrap has a built-in event for showing/hiding collapsable panels which should be used instead of a regular click event. Please see my answer below. – Martin May 16 '16 at 02:47
@Moshtaf The class actives still when you open and close the same heading! – Omar Alahmed Oct 02 '17 at 07:38
I had to make a small update on the above anwser with a condition if the clicked element had class ('actives') to only remove it and not re-apply it again. – Patrice Poliquin Oct 06 '17 at 19:53

score 14 · Answer 2 · answered May 16 '16 at 02:43

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

This is best approach since solution of Moshtaf is not working properly. When you click on same panel it does not change class. — Mitrovic Srdjan, Sep 29 '17 at 15:36

score 5 · Answer 3 · edited May 23 '17 at 12:18

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

score 5 · Answer 4 · answered May 14 '17 at 19:27

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;
}

score 2 · Answer 5 · answered Dec 16 '14 at 23:24

$(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.

score 1 · Answer 6 · answered Nov 26 '18 at 11:40

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

Bootstrap 3 Collapse - adding active class to open panel

6 Answers6

Linked