Bootstrap JS Samenvouwen
JS samenvouwen (collapse.js)
Krijg basisstijlen en flexibele ondersteuning voor opvouwbare componenten zoals accordeons en navigatie.
Afhankelijkheid van plug-ins: Collapse vereist dat de plug-in voor overgangen is opgenomen in uw versie van Bootstrap.
Voor een tutorial over Collapsibles, lees onze Bootstrap Collapse Tutorial .
De Collapse Plugin Klassen
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | |
| .collapse in | Shows the content | |
| .collapsing | Added when the transition starts, and removed when it finishes |
Via data-* Attributen
Voeg gewoon data-toggle="collapse" en een data-target toe aan element om automatisch controle over een inklapbaar element toe te wijzen. Het kenmerk data-target accepteert een CSS-selector om het samenvouwen op toe te passen. Zorg ervoor dat u het samenvouwen van de klasse toevoegt aan het opvouwbare element. Als u wilt dat deze standaard wordt geopend, voegt u de extra klasse toe.
Voorbeeld
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Tip: Om accordeonachtig groepsbeheer toe te voegen aan een opvouwbaar besturingselement, voegt u het data-attribuut data-parent="#selector" toe.
Via JavaScript
Handmatig inschakelen met:
$('.collapse').collapse()
Opties samenvouwen
Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voor gegevensattributen voegt u de optienaam toe aan data-, zoals in data-parent="".
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| toggle | boolean | true | Toggles the collapsible element on invocation |
Methoden samenvouwen
De volgende tabel bevat alle beschikbare methoden voor samenvouwen.
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | |
| .collapse("show") | Shows the collapsible element | |
| .collapse("hide") | Hides the collapsible element |
Evenementen samenvouwen
In de volgende tabel worden alle beschikbare samenvouwingsgebeurtenissen weergegeven.
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) |
Meer voorbeelden
Eenvoudig opvouwbaar
In het volgende voorbeeld schakelt een knop de uitvouwbare en samengevouwen inhoud van een ander element in:
Voorbeeld
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
Simple collapsible
</button>
<div id="demo" class="collapse in">
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>
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
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 de paneelcomponent uit te breiden:
Opmerking: Het data-parentattribuut zorgt ervoor dat alle opvouwbare elementen onder de gespecificeerde ouder worden gesloten wanneer een van de opvouwbare 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>
Uitvouwen en samenvouwen Pictogram en tekst wisselen
In het volgende voorbeeld worden de tekst en het pictogram voor openen/sluiten gewijzigd bij het openen en sluiten van de opvouwbare inhoud:
Voorbeeld
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
Of je kunt CSS gebruiken:
Voorbeeld
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
content: "\e080";
}