Meerdere groepen openen in Bootstrap 3 collapse plugin

Ik ben een groot fan van Bootstrap. Een prachtig uitgangspunt om een responsive website of webtoepassing te realiseren. Bootstrap kent verschillende plugins. Een daarvan is de collapse plugin. Met deze plugin kun je handig stukken tekst in- en uitklappen. Ideaal voor bijvoorbeeld een FAQ. Maar wat nu als je niet automatisch een blok wilt dichtklappen als een ander blok wordt geopend?

Deze functionaliteit staat bekend onder verschillende namen. Sommigen noemen het een panel, anderen accordion, ik houd het bij een collapse. Deze collapse is ideaal om gebruikers zelf de mogelijkheid te kunnen geven om delen van de aangeboden informatie dicht en open te klappen. Inmiddels is Bootstrap 3 verouderd, maar nog veel websites maken hiervan gebruik. Daarom hierbij voorbeeldcode:


<div class="panel-group" id="accordion">
	<div class="panel panel-default">
	<div class="panel-heading">
		<h4 class="panel-title">
		<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
			Titel #1
		</a>
		</h4>
	</div>
	<div id="collapseOne" class="panel-collapse collapse in">
		<div class="panel-body">
		Tekst
		</div>
	</div>
	</div>
	<div class="panel panel-default">
	<div class="panel-heading">
		<h4 class="panel-title">
		<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
			Titel #2
		</a>
		</h4>
	</div>
	<div id="collapseTwo" class="panel-collapse collapse">
		<div class="panel-body">
		Tekst
		</div>
	</div>
	</div>
</div>
			

Iedere titel is een link. Deze link heeft een aantal attributen, waaronder de data-parent. Deze data-parent bepaalt aan welke andere elementen deze is gekoppeld. Wil je dus niet dat opengeklapt item dichtklapt als je een ander item openklapt, dan verwijder je simpelweg de data-parent.

Over mij

Mijn naam is Marcel van Langen. Ik ben werkzaam als freelancer. Een harde en eerlijke werker, met een passie voor doelgerichte oplossingen. Ik voer al jaren mooie klussen uit voor geweldige klanten. Mijn technische specialisaties zijn het Thinkwise platform, SQL Server en ColdFusion development.

Lees verder...
Diensten