Twitter bootstrap: adding a class to the open accordion title

Twitter bootstrap: adding a class to the open accordion title

I am a jquery/javascript newbie. What I want to do is add a class to the open accordion title, and remove it when i open another.
heres the code:

The scripts I have attached with the page are


So what I was looking for was to add the .active class to a.accordion-toggle whenever the menu is open (accordion style), and then have it go away once another is selected. I’ve looked at the documentation to bootstrap here, but it doesnt seem to help me out a lot (since I don’t know what to do with the

$(‘#myCollapsible’).on(‘hidden’, function () { // do something… })

or where to place it) I’ve also tried the .addClass() jquery adder, but I could only get the javascript version document.getElementById(“accordion-heading”).className += ” newClass”; to work (if I gave the accordion group title an ID, but in this case there will be multiple accordion groups) when I put the script right after the div layer.

Related:  Bootstrap drop down cutting off

Solutions/Answers:

Solution 1:

You can use the Collapse events for this.

$(function() {

    $('.accordion').on('show', function (e) {
         $(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active');
    });

    $('.accordion').on('hide', function (e) {
        $(this).find('.accordion-toggle').not($(e.target)).removeClass('active');
    });

});​

Here’s a JsFiddle http://jsfiddle.net/D2RLR/251/

Solution 2:

Here’s my solution to this problem. Based on some of the great answers above, but adapted to work with Bootstrap 3.1.x

$('#accordion')
  .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');
  });

Solution 3:

I was also Looking to add an “active” class or similar but I noticed during inspection that when inactive all the links have a class of “collapsed” that is removed when the tab/link is selected, thus I simply tageted the tab without the “collapsed” class.

Solution 4:

I’ve tried Michael D. Irizarry’s solution but that didn’t work for me.
So I came up with my own code:

$(function() {
    $('a.accordion-toggle').click(function(e) {
        e.preventDefault();
        if(!$(this).parent().hasClass('active')) {
            $('.accordion-heading').removeClass('active');
            $('.accordion-body').removeClass('active');
            $(this).parent().addClass('active').next().addClass('active');
        } else {
            $('.accordion-heading').removeClass('active');
            $('.accordion-body').removeClass('active');
        }
    });
});

If the accordion-heading already does not have a class of active, all accordion-headings & bodies lose the active class, and the one that has been clicked and it’s corresponding body tag will get the class added.

Related:  Angular 4: How to include Bootstrap?

If it already has the class active (so if it is already open and been clicked) then the active class is removed and nothing else happens.

Solution 5:

simply check for the collapsed class added by the BS Code:

$('a.accordion-toggle').on('click', function () {
    if( $(this).hasClass('collapsed') !== true ){
        $(this).removeClass('active');
    }else{
        $(this).addClass('active');
    }
});

Solution 6:

I think this is the simplest way so far.

$('a.accordion-toggle').on('click', function () {
  $('a.accordion-toggle').removeClass('active');
  $(this).addClass('active');
});

References