Bootstrap samenvouwen
Basis opvouwbaar
Collapsibles zijn handig wanneer u een grote hoeveelheid inhoud wilt verbergen en weergeven:
Voorbeeld
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Voorbeeld uitgelegd
De .collapseklasse geeft een samenvouwbaar element aan (een <div> in ons voorbeeld); dit is de inhoud die met een klik op de knop wordt getoond of verborgen.
Voeg het data-toggle="collapse"attribuut toe aan een <a>- of een <button>-element om de samenvouwbare inhoud te beheren (weergeven/verbergen). Voeg vervolgens het data-target="#id"kenmerk toe om de knop te verbinden met de opvouwbare inhoud (<div id="demo">).
Opmerking: voor <a>-elementen kunt u het hrefattribuut gebruiken in plaats van het data-target
attribuut:
Voorbeeld
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Standaard is de samenvouwbare inhoud verborgen. U kunt de .inklas echter toevoegen om de inhoud standaard weer te geven:
Voorbeeld
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Opvouwbaar paneel
Het volgende voorbeeld toont een inklapbaar paneel:
Voorbeeld
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Opvouwbare lijstgroep
- One
- Two
- Three
Het volgende toont een inklapbaar paneel met een lijstgroep erin:
Voorbeeld
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
Accordeon
Het volgende voorbeeld toont een eenvoudige accordeon door het paneelonderdeel uit te breiden.
Opmerking: gebruik het data-parentattribuut om ervoor te zorgen dat alle samenvouwbare elementen onder het opgegeven bovenliggende element worden gesloten wanneer een van de samenvouwbare items wordt weergegeven.
Voorbeeld
<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="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
Volledige Bootstrap Collapse-referentie
Ga voor een volledige referentie van alle samenvouwopties, -methoden en -gebeurtenissen naar onze Bootstrap JS Collapse-referentie .