Source

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 heightvan de huidige waarde naar 0. Gezien de manier waarop CSS met animaties omgaat, kunt u deze niet paddingop een .collapseelement gebruiken. Gebruik in plaats daarvan de klasse als een onafhankelijk verpakkingselement.

Voorbeeld

Klik op de onderstaande knoppen om een ​​ander element te tonen en te verbergen via klassewijzigingen:

  • .collapseverbergt inhoud
  • .collapsingwordt toegepast tijdens overgangen
  • .collapse.showtoont inhoud

U kunt een link met het hrefattribuut gebruiken, of een knop met het data-targetattribuut. In beide gevallen data-toggle="collapse"is het verplicht.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Meerdere doelen

Een <button>of <a>kan meerdere elementen tonen en verbergen door ernaar te verwijzen met een JQuery-selector in zijn hrefof data-targetattribuut. Meerdere <button>of <a>kunnen een element tonen en verbergen als ze er elk naar verwijzen met hun hrefof data-targetattribuut

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Accordeon voorbeeld

Met behulp van de kaartcomponent kunt u het standaard samenvouwgedrag uitbreiden om een ​​accordeon te maken.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Foodtruck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua zet er een vogel op inktvis single-origin koffie nulla veronderstelnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan behalve slager vice lomo. Leggings voor ambachtelijk bier van boer tot bord, ruwe denim esthetische synth nesciunt je hebt er waarschijnlijk nog nooit van gehoord accusamus labore duurzame VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Toegankelijkheid

Zorg ervoor dat u aria-expandedhet 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 open is met de showklasse, 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 opvouwbare 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-targetattribuut verwijst naar een idselector – moet u het aria-controlsattribuut toevoegen aan het besturingselement, dat de idvan 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.

Houd er rekening mee dat de huidige implementatie van Bootstrap niet de verschillende toetsenbordinteracties dekt die worden beschreven in het accordeonpatroon van WAI-ARIA Authoring Practices 1.1 - u moet deze zelf toevoegen met aangepast JavaScript.

Gebruik

De instortingsplug-in gebruikt een paar klassen om het zware werk aan te kunnen:

  • .collapseverbergt de inhoud
  • .collapse.showtoont de inhoud
  • .collapsingwordt 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-targetaan het element om automatisch de besturing van een of meer opvouwbare elementen toe te wijzen. Het data-targetattribuut accepteert een CSS-selector om het samenvouwen op toe te passen. Zorg ervoor dat u de klasse toevoegt collapseaan 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 cardklas). Het attribuut moet worden ingesteld op het inklapbare doelgebied.
schakelaar booleaans WAAR Schakelt het opvouwbare element in bij aanroepen

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 .

Raadpleeg onze JavaScript-documentatie voor meer informatie.

.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.collapseof 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.collapsegebeurtenis plaatsvindt).

.collapse('hide')

Verbergt een opvouwbaar element. Keert terug naar de aanroeper voordat het opvouwbare element daadwerkelijk is verborgen (dwz voordat de hidden.bs.collapsegebeurtenis 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 showinstantiemethode 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 hidemethode 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…
})