18

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:

<div class="accordion" data-collapse-type="manual" id="parent">
  <div class="accordion-group">
    <div class="accordion-heading">             
      <a class="accordion-toggle category" data-toggle="collapse" data-parent="#parent" href="#category1">Category 1
      </a>
    </div><!--/accordion-heading-->
    <div id="category1" class="accordion-body collapse">
      <ul class="accordion-inner unstyled">
        <li id="" class="sidelink"><a href="">Open Link 1</a></li>
        <li id="" class="sidelink"><a href="">Open Link 2</a></li>
        <li id="" class="sidelink"><a href="">Open Link 3</a></li>
      </ul>
    </div><!--/category1-->
  </div><!--/accordion-group-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle category" href="#Category2">Category 2</a>
    </div><!--/accordion-heading-->
  </div><!--/accordion-group-->
</div><!--/accordion-->

The scripts I have attached with the page are

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.tools.min.js"></script>

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.

11 Answers 11

29

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/

5
  • Thank you, This is what I am looking for... But I still cant seem to get it working correctly. Do I add this in script tags in the header section of the document? Like I said, Im a javascript newbie
    – tgunnoe
    Jun 6, 2012 at 18:25
  • You can add it in an external js file and include it in the bottom or header of your page. Here are a few examples on how to include them w3schools.com/js/js_whereto.asp Jun 6, 2012 at 18:35
  • Remember if you found this answer useful and it solved your problem to mark it as an accepted answer. Jun 6, 2012 at 18:37
  • great answer - just what i was looking for!
    – Dan
    Jul 11, 2013 at 1:35
  • 1
    For future readers, the event is now 'show.bs.collapse' as stated in @Pim's answer for Bootstrap 3.1.x
    – Joao
    Dec 18, 2014 at 23:41
16

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');
  });
1
  • 3
    Thanks! I also had to add $('#accordion .collapse.in').prev('.panel-heading').addClass('active'); before the function so the class can be added on page load.
    – Ziik
    Sep 6, 2014 at 12:54
2

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.

1
  • Good catch. Beats having to use JS when it's already applied.
    – lislis
    Jul 28, 2016 at 16:06
1

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.

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.

1
  • This one works well with Drupal's Views Bootstrap (be it by slightly altering the class names). Jun 26, 2015 at 8:22
1

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

I think this is the simplest way so far.

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

I think it would work if you put this on your javascript:

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

$('.accordion-toggle').on('hidden', function () {
 $(this).removeClass('active') });
2
  • I couldn't seem to get it working with that. I added that script right below the a.accordion-toggle element, with no result. But I havent gotten .addClass or .removeClass working with any elements. Maybe I havent loaded up the correct jquery libraries?
    – tgunnoe
    Jun 6, 2012 at 17:21
  • ... "shown" and "hidden" do exist >_> getbootstrap.com/2.3.2/javascript.html#collapse
    – Ben
    Sep 25, 2013 at 21:20
0

class active dont give the item becouse in less files this class changed you have to give it css instead class. this code is work best and you can add another css that you required

 $(function () {
            $('#accordion')
     .on('show.bs.collapse', function (e) {
         $(e.target).prev('.panel-heading').css({'background-color': 'red','color':'white'})
     })
     .on('hide.bs.collapse', function (e) {
         $(e.target).prev('.panel-heading').css({ 'background-color': '#b6ff00', 'color': 'black' })
     });
        });
0

This works for me using Bootstrap 3.3.6,

 $('#accordion')
   .on('show.bs.collapse', function (e) {
       $(e.target).parent('.panel').addClass('panel-primary');
   })
   .on('hide.bs.collapse', function (e) {
       $(e.target).parent('.panel').removeClass('panel-primary');
   });
        });
0

https://jsfiddle.net/u2ay67Lo/6/

HTML

    <div id="accordion2" class="accordion panel-group">
  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse5" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
             Lorem ipsum dolor sit amet ..
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse5">
      <div class="accordion-inner panel-body">
        <div class="row">
          <div class="col-md-10">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit faucibus elit nec mollis. Phasellus tempor urna tellus, eget lobortis magna porttitor eget. Sed risus ex, ultrices ac quam at, ultrices feugiat dolor. Mauris nec fermentum arcu.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Peças escritas e desenhadas (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Participa</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse7" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
               Donec vitae efficitur magna...
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse7">
      <div class="accordion-inner panel-body">
        <div class="row">
          <div class="col-md-10">
            Donec vitae efficitur magna, non iaculis sapien. Pellentesque ut leo turpis. Sed aliquet, lorem vel sollicitudin pretium, sapien augue rutrum risus, eu ultricies risus est in nibh. Etiam molestie non lorem in mollis. Cras non mi tempus, varius elit id,
            ultrices diam. Vestibulum bibendum lacus vitae augue interdum, ut ultricies elit aliquam. Fusce rhoncus nunc convallis luctus ornare. Curabitur vulputate posuere ligula in eleifend. Vivamus commodo mi sed felis dignissim, rutrum pharetra odio
            varius. Sed vel aliquet tortor. Nunc sit amet nibh eget sem elementum pulvinar. Maecenas et felis at felis venenatis lacinia vitae sit amet nulla.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Peças escritas e desenhadas (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Participa</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse8" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
              Maecenas et felis at felis...
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse8">
      <div class="accordion-inner panel-body">
        <div class="row">
          <div class="col-md-10">
            Maecenas et felis at felis venenatis lacinia vitae sit amet nulla.Morbi tempor facilisis aliquam. Suspendisse ac velit ut lectus vehicula finibus imperdiet et leo.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Peças escritas e desenhadas (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Button1</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse9" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
               Quisque placerat in dui quis vestibulum. ..
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse9">
      <div class="accordion-inner panel-body">
        <div class="row">
          <div class="col-md-10">
            Quisque placerat in dui quis vestibulum. Morbi tempor facilisis aliquam. Suspendisse ac velit ut lectus vehicula finibus imperdiet et leo. Mauris commodo auctor tellus, at lobortis sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
            per inceptos himenaeos. Morbi fringilla lectus et urna blandit porta. Aliquam sed dolor gravida tellus pharetra laoreet in vel dolor. Sed cursus lacus vel metus porttitor, sed tempus enim pharetra. Vestibulum malesuada faucibus diam hendrerit
            molestie. Aenean eget malesuada ipsum. Phasellus vitae erat at tellus aliquet sollicitudin. Integer nec neque nec felis egestas efficitur. Aliquam sodales est neque, in vulputate orci cursus in. Nunc ac leo suscipit, porttitor tellus non,
            fermentum eros. Sed aliquet elit at est consequat, et semper risus porta.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">File1 (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Test</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

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

CSS

.accordionPannelActive {
      background-color: #8dc640!important;
      color: white !important;
}

a.accordion-title:focus {
      color: inherit;
      text-decoration: none;
}

.panel-default > .panel-heading {
      background-image: none;
}

a.accordion-title:hover {
      color: inherit;
      background-color: inherit;
      text-decoration: none;
}

.panel-default > .panel-heading {
      background-image: none;
}
.panel-title{
      display:block;
}

Needs: jquery.min.js, jquery.min.js, bootstrap.min.css, bootstrap-theme.min.css and bootstrap.min.js

-1

This works for me..

$('.panel-default').on('show.bs.collapse', function () {
     $('.panel-heading').addClass('active');
});

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.