Instorten
Verander de zichtbaarheid van inhoud in uw project met een paar klassen en onze JavaScript-plug-ins.
Hoe het werkt
De JavaScript-plug-in voor samenvouwen wordt gebruikt om inhoud te tonen en te verbergen. Knoppen of ankers worden gebruikt als triggers die zijn toegewezen aan specifieke elementen die u inschakelt. Als u een element samenvouwt, wordt het geanimeerd height
van de huidige waarde naar 0
. Gezien de manier waarop CSS met animaties omgaat, kunt u deze niet padding
op een .collapse
element gebruiken. Gebruik in plaats daarvan de klasse als een onafhankelijk verpakkingselement.
prefers-reduced-motion
mediaquery. Zie het
gedeelte over beperkte beweging van onze toegankelijkheidsdocumentatie .
Voorbeeld
Klik op de onderstaande knoppen om een ander element te tonen en te verbergen via klassewijzigingen:
.collapse
verbergt inhoud.collapsing
wordt toegepast tijdens overgangen.collapse.show
toont inhoud
Over het algemeen raden we aan om een knop met het data-target
attribuut te gebruiken. Hoewel dit vanuit semantisch oogpunt niet wordt aanbevolen, kunt u ook een link gebruiken met het href
attribuut (en een role="button"
). In beide gevallen data-toggle="collapse"
is het verplicht.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
Horizontaal
De inklapplug-in ondersteunt ook horizontaal samenvouwen. Voeg de .width
modificatieklasse toe om de over te zetten width
in plaats van height
en stel een width
in op het directe onderliggende element. Voel je vrij om je eigen aangepaste Sass te schrijven, inline-stijlen te gebruiken of onze breedtehulpprogramma's te gebruiken .
min-height
set bevat om overmatig opnieuw schilderen in onze documenten te voorkomen, dit niet expliciet vereist is.
Alleen het width
element on the child is vereist.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Meerdere doelen
Een <button>
of <a>
kan meerdere elementen tonen en verbergen door ernaar te verwijzen met een JQuery-selector in zijn href
of data-target
attribuut. Meerdere <button>
of <a>
kunnen een element tonen en verbergen als ze er elk naar verwijzen met hun href
of data-target
attribuut
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
Accordeon voorbeeld
Met behulp van de kaartcomponent kunt u het standaard samenvouwgedrag uitbreiden om een accordeon te maken. Om de accordeonstijl goed te bereiken, moet u deze .accordion
als wikkel gebruiken.
.show
klasse.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>
Toegankelijkheid
Zorg ervoor dat u aria-expanded
het besturingselement toevoegt. Dit kenmerk geeft expliciet de huidige status van het inklapbare element dat aan het besturingselement is gekoppeld, weer aan schermlezers en vergelijkbare ondersteunende technologieën. Als het samenvouwbare element standaard is gesloten, moet het attribuut op het besturingselement een waarde hebben van aria-expanded="false"
. Als je hebt ingesteld dat het samenvouwbare element standaard is geopend met behulp van de show
klasse, stel je aria-expanded="true"
in plaats daarvan in op het besturingselement. De plug-in schakelt dit attribuut automatisch in op het besturingselement op basis van het feit of het inklapbare element al dan niet is geopend of gesloten (via JavaScript, of omdat de gebruiker een ander besturingselement heeft geactiveerd dat ook aan hetzelfde inklapbare element is gekoppeld). Als het HTML-element van het besturingselement geen knop is (bijv. an <a>
of <div>
), is het attribuutrole="button"
moet worden toegevoegd aan het element.
Als uw besturingselement gericht is op een enkel opvouwbaar element – dwz het data-target
attribuut verwijst naar een id
selector – moet u het aria-controls
attribuut toevoegen aan het besturingselement, dat de id
van het inklapbare element bevat. Moderne schermlezers en vergelijkbare ondersteunende technologieën maken gebruik van dit kenmerk om gebruikers extra snelkoppelingen te bieden om rechtstreeks naar het inklapbare element zelf te navigeren.
Merk op dat de huidige implementatie van Bootstrap niet de verschillende toetsenbordinteracties dekt die worden beschreven in het accordeonpatroon van de ARIA Authoring Practices Guide - u moet deze zelf toevoegen met aangepast JavaScript.
Gebruik
De instortingsplug-in gebruikt een paar klassen om het zware werk aan te kunnen:
.collapse
verbergt de inhoud.collapse.show
toont de inhoud.collapsing
wordt toegevoegd wanneer de overgang begint en verwijderd wanneer deze is voltooid
Deze lessen zijn te vinden in _transitions.scss
.
Via gegevensattributen
Voeg gewoon data-toggle="collapse"
en a toe data-target
aan het element om automatisch de besturing van een of meer opvouwbare elementen toe te wijzen. Het data-target
attribuut accepteert een CSS-selector om het samenvouwen op toe te passen. Zorg ervoor dat u de klasse toevoegt collapse
aan het opvouwbare element. Als u wilt dat deze standaard wordt geopend, voegt u de extra klasse toe show
.
Om accordeonachtig groepsbeheer toe te voegen aan een inklapbaar gebied, voegt u het data-attribuut toe data-parent="#selector"
. Raadpleeg de demo om dit in actie te zien.
Via JavaScript
Handmatig inschakelen met:
$('.collapse').collapse()
Opties
Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-
, zoals in data-parent=""
.
Naam | Type | Standaard | Beschrijving |
---|---|---|---|
ouder | kiezer | jQuery-object | DOM-element | vals | Als bovenliggend item is opgegeven, worden alle samenvouwbare elementen onder het opgegeven bovenliggende item gesloten wanneer dit opvouwbare item wordt weergegeven. (vergelijkbaar met traditioneel accordeongedrag - dit is afhankelijk van de card klas). Het attribuut moet worden ingesteld op het inklapbare doelgebied. |
schakelaar | booleaans | WAAR | Schakelt het opvouwbare element in bij aanroep |
Methoden:
Asynchrone methoden en overgangen
Alle API-methoden zijn asynchroon en starten een transitie . Ze keren terug naar de beller zodra de overgang is gestart maar voordat deze eindigt . Bovendien wordt een methodeaanroep op een overgangscomponent genegeerd .
.collapse(options)
Activeert uw inhoud als een opvouwbaar element. Accepteert een optionele optie object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Schakelt een samenvouwbaar element om naar weergegeven of verborgen. Keert terug naar de aanroeper voordat het inklapbare element daadwerkelijk is getoond of verborgen (dwz voordat de shown.bs.collapse
of hidden.bs.collapse
-gebeurtenis plaatsvindt).
.collapse('show')
Toont een opvouwbaar element. Keert terug naar de beller voordat het opvouwbare element daadwerkelijk is getoond (dwz voordat de shown.bs.collapse
gebeurtenis plaatsvindt).
.collapse('hide')
Verbergt een opvouwbaar element. Keert terug naar de aanroeper voordat het opvouwbare element daadwerkelijk is verborgen (dwz voordat de hidden.bs.collapse
gebeurtenis plaatsvindt).
.collapse('dispose')
Vernietigt de ineenstorting van een element.
Evenementen
De collapsklasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de ineenstortingsfunctionaliteit.
Evenementtype | Beschrijving |
---|---|
toon.bs.collapse | Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de show instantiemethode wordt aangeroepen. |
getoond.bs.collapse | Deze gebeurtenis wordt geactiveerd wanneer een samengevouwen element zichtbaar is gemaakt voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid). |
verberg.bs.collapse | Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hide methode is aangeroepen. |
verborgen.bs.collapse | Deze gebeurtenis wordt geactiveerd wanneer een samengevouwen element voor de gebruiker is verborgen (wacht tot de CSS-overgangen zijn voltooid). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})