Bootstrap 3: Accordion Menu with Collapse and Icon Switching

Question

I’ve combed through dozens of Bootstrap accordion menus and have pieced together most of what I need but I’m having trouble with the icon switching script.

$(parent).find('.glyphicon').not($(event.target)).toggleClass('glyphicon-plus glyphicon-minus');

You can see the whole test here: http://www.bootply.com/122048

Answer 1

    make_minus = false;  
    if($this.find('.glyphicon').hasClass('glyphicon-plus'))
    {
      make_minus = true;
    }

    $('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');

    if(make_minus)
    {
      $this.find('.glyphicon').removeClass('glyphicon-plus').addClass('glyphicon-minus');
    }

http://www.bootply.com/122084

Answer 2

Why not use .toggleClass(glyphicon-minus glyphicon-plus) to switch between the icon classes. I found it much easier to work with accordions this way to switch the icons. I then run the .hasClass('active') in the if statement that I add and remove from the accordion based on whether or not the current accordion item is active (open).

var lastIcon;
  $('.accordion > .accordion-item').click(function () {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      $(this).find('i').toggleClass('fa-plus fa-minus');
      lastIcon = null;
      return true;
    }
    $('.accordion > .accordion-item').removeClass('active');
    $(this).addClass('active');
    $(this).find('i').add(lastIcon).toggleClass('fa-plus fa-minus');
    lastIcon = $(this).find('i');
  });

this was an example of code that I have written in the past recently for an accordion that I had required for my own site. Obviously there are some selectors grabbing onto the DOM within this but since I didn't see how you are grabbing onto the DOM except for the glyphicons I wasn't sure how to edit this to work with your markup.