Bootstrap 3 active class add/remove on button outs

Question

I looked around and saw a lot about adding the "active" class to the heading that triggers the accordion. But I can not figure out how to add it to buttons that are outside the container of the accordion. I read about the bootstrap 3 button toggle(http://getbootstrap.com/javascript/#buttons). That kinda works but the active class does not get removed when clicking another button.

Here is my HTML:

<div class="btn-toolbar" role="toolbar">
              <div class="btn-group">
                  <a class="btn btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1</a>
                  <a class="btn btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2</a>
                  <a class="btn btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3</a>
              </div>
              </div><!-- /.btn-toolbar -->
<div class="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">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

There is also a JSfiddle set up at: http://jsfiddle.net/Bootstrap714/9Ljxbb2p/1/

I feel like it has something to do with the "shown.bs.collapse" and "hidden.bs.collapse"

Any help would be greatly appreciated.

Answer 1

A bit more complicated than I originally anticipated, but you could add this jQuery:

$('.btn').click(function(){
    active_change($(this));
});

$('.collapse-link').click(function(){
    var item = $('.collapse-' + $(this).attr("data-id"));
    active_change(item);
});

//the below activity is shared so it can be done in a single function, called from either  click above.  
function active_change(item){ 
    if($(item).hasClass('active')){
        $(item).removeClass('active');
    }else{   
        $('.btn').removeClass('active');
        $(item).addClass('active');
    }
}

And add appropriate class and data-id attributes in your html. The changes I made were, changed the panel accordion link to:

<a class="collapse-link" data-id="1" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">

And I added classes collapse-1, collapse-2, etc. to the numeric links.

Updated jsFiddle Demo

Answer 2

Yes you can use shown.bs.collapse, as in the documentation:

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

http://getbootstrap.com/javascript/#collapse

maybe you can also look into the data-parent="#selector" part to set another element to active.

button is really about something else, creating a loading text and disabling buttons on clicks.

Answer 3

The first solution from Dan is halfway correct because when an accordion is collapsed the button is still active (i.e clicking the button twice) which should not be the case. I have added an if statement for the button to be active when the collapse is collapsed.

$('.btn').click(function(){
    $('.btn').removeClass('active');
    var collapseId = $(this).attr("href");
    if(!$(collapseId).hasClass("in")) { // the bootstrap class "in" when the collapse is expanded
        $(this).addClass('active');
    }
})

note that it is

if(!$(collapseId).hasClass("in"))

because this is executed when the collapse is already expanded.