Bootstrap 4 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 .showklas echter toevoegen om de inhoud standaard weer te geven:
Voorbeeld
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Accordeon
Het volgende voorbeeld toont een eenvoudige accordeon door het kaartonderdeel 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 id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
Volledige Bootstrap 4 Collapse-referentie
Ga voor een volledige referentie van alle samenvouwopties, -methoden en -gebeurtenissen naar onze Bootstrap 4 JS Collapse-referentie .