Meerdere groepen openen in Bootstrap collapse plugin

23-09-2014 | Marcel van Langen | Bootstrap | collapse, harmonica, open, dicht, bootstrap

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. De code om een default collaspe te krijgen in Bootstrap 3, kun je vinden op de website van Bootstrap. Deze ziet er ongeveer als volgt uit:

<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 Morloff

Morloff ontwerpt en realiseert succesvolle webtoepassingen op het gebied van procesoptimalisatie, eCommerce en rapportage door de inzet van moderne webtechnieken, sociale media en zoekmachine optimalisatie.

over ons | diensten | portfolio | contact | route

naar website IJsmonster.nl naar website ICT intermediairs naar website marcelvanlangen.com

Twitter

Morloff

Cuneraweg 169a
3911 RH Rhenen

M +31 (0)6 - 515 96 189
W www.morloff.nl
E contactformulier

Morloff op Twitter Morloff op Facebook Morloff op LinkedIn Morloff via RSS