TYPO3 Bootstrap Package: Accordion optimieren

Den Headline-Container des Accordions klickbar zu machen, ist mit zwei Zeilen CSS lösbar:

Jetzt kann der User beliebig auf den Bereich klicken und muss nicht mehr ausschließlich den Überschriftentext treffen.

Die zweite Aufgabe lautet, den Zustand des einzelnen Accordionitems durch Icons - im obigen Beispiel durch + / - Icons - darzustellen. Erfreulicherweise liefert das Bootstrap Package ein Set Glyphicons mit. Damit lassen sich die gewünschten Icons bequem via CSS realisieren:

/* damit das schon geöffnete Item ein Minus hat - nur setzten, wenn das auch so eingestellt ist! */
.panel-default:first-child .panel-title a:before {
  content:'\2212';
  font-family:'Glyphicons Halflings';
  line-height:1;
  display:inline-block;
  }

/* Plus-Icon für geschlossene (überschreibt auch den Block oben, wenn die Klasse nonactive gesetzt ist) */
.panel-title a:before, .panel-default:first-child .nonactive .panel-title a:before {
  content:'\2b';
  font-family:'Glyphicons Halflings';
  line-height:1;
  display:inline-block;
  }

/* allgemeines Minus für aktive Elemente */
.active .panel-title a:before {
  content:'\2212';
  font-family:'Glyphicons Halflings';
  line-height:1;
  display:inline-block;
  }

Jetzt fehlen noch ein paar Zeilen JavaScript, um den Wechsel der Klassen bei Klick zu realisieren:

$('.panel-group')
  .on('show.bs.collapse', function(e) {
    $(e.target).prev('.panel-heading').addClass('active');
    $(e.target).prev('.panel-heading').removeClass('nonactive');
  })
  .on('hide.bs.collapse', function(e) {
    $(e.target).prev('.panel-heading').removeClass('active');
    $(e.target).prev('.panel-heading').addClass('nonactive');
  });

Die Klasse nonactive wird nur bei einem standardmäßig aufgeklappten ersten Element benötigt. Damit wird sicher gestellt, dass das Element wie es soll von - auf + wechselt und nicht umgekehrt.