Pijltjes op de collapse / accordion van Twitter Bootstrap

Recent kreeg ik feedback op een website die ik in het verleden gemaakt had waarbij de collapse van Twitter Bootstrap gebruikt wordt, de opmerking was dat het niet duidelijk genoeg was dat deze opengeklapt kunnen worden door aan te klikken. Zodoende hier pijltjes aan toegevoegd welke verdwijnen zodra er één geopend is. Hieronder zal ik uitleggen wat ik hiervoor aangepast heb.

HTML aanpassen

Voeg aan elke “accordion-heading” een afbeelding van een pijltje toe met een “pull-left”.

<div class="accordion-heading">
	<h2><i class="icon-chevron-down pull-left"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#wizard" href="#brand">Merk</a></h2>
</div>

CSS toevoegen

Zoals hierboven in de HTML te zien is heb ik heading 2 tags gebruikt, hier moest de margin voor het icoon dan ook op aangepast worden:

.accordion .icon-chevron-down {
	margin: 9px 10px 0 15px;
}

Javascript toevoegen

Om het allemaal goed te laten functioneren heb ik een stukje Javascript toegevoegd welke inhaakt op de Javascript van de collapse. Zoals te zien wordt hier jQuery bij gebruikt.

$('#wizard').on('show', function (e) {
	$('.accordion .icon-chevron-down').removeClass('hide');
	$(e.target).prev().children().children('.icon-chevron-down').addClass('hide');
});

$('#wizard').on('hide', function (e) {
	$('.accordion .icon-chevron-down').removeClass('hide');
});

Mocht iemand zich geroepen voelen dit te melden bij Twitter Boostrap als toevoeging, ga je gang!