Instorten

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

Over het algemeen raden we aan om een ​​knop met het data-bs-targetattribuut te gebruiken. Hoewel dit vanuit semantisch oogpunt niet wordt aanbevolen, kunt u ook een link gebruiken met het hrefattribuut (en een role="button"). In beide gevallen data-bs-toggle="collapse"is het verplicht.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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 .collapse-horizontalmodificatieklasse toe om de over te zetten widthin plaats van heighten stel een widthin 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 .

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      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>or <a>kan meerdere elementen tonen en verbergen door ernaar te verwijzen met een selector in zijn hrefof data-bs-targetattribuut. Meerdere <button>of <a>kunnen een element tonen en verbergen als ze er elk naar verwijzen met hun hrefof data-bs-targetattribuut

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

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 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-bs-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.

Merk op dat de huidige implementatie van Bootstrap niet de verschillende optionele toetsenbordinteracties dekt die worden beschreven in het accordeonpatroon van de ARIA Authoring Practices Guide - u zult deze zelf moeten toevoegen met aangepast JavaScript.

Sass

Variabelen

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Klassen

Collapse-overgangsklassen zijn te vinden in scss/_transitions.scssomdat deze worden gedeeld over meerdere componenten (collapse en accordeon).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

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-bs-toggle="collapse"en a toe data-bs-targetaan het element om automatisch de besturing van een of meer opvouwbare elementen toe te wijzen. Het data-bs-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-bs-parent="#selector". Raadpleeg de accordeonpagina voor meer informatie.

Via JavaScript

Handmatig inschakelen met:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Opties

Omdat opties kunnen worden doorgegeven via gegevensattributen of JavaScript, kunt u een optienaam toevoegen aan data-bs-, zoals in data-bs-animation="{value}". Zorg ervoor dat u het kasttype van de optienaam wijzigt van " camelCase " in " kebab-case " wanneer u de opties doorgeeft via gegevensattributen. Gebruik bijvoorbeeld in data-bs-custom-class="beautifier"plaats van data-bs-customClass="beautifier".

Vanaf Bootstrap 5.2.0 ondersteunen alle componenten een experimenteel gereserveerd gegevenskenmerk data-bs-configdat een eenvoudige componentconfiguratie als een JSON-tekenreeks kan bevatten. Wanneer een element attributen heeft data-bs-config='{"delay":0, "title":123}', zal data-bs-title="456"de uiteindelijke titlewaarde zijn 456en zullen de afzonderlijke gegevensattributen de waarden overschrijven die op data-bs-config. Bovendien kunnen bestaande gegevensattributen JSON-waarden zoals data-bs-delay='{"show":0,"hide":150}'.

Methoden:

Activeert uw inhoud als een opvouwbaar element. Accepteert een optionele optie object.

U kunt een samenvouwingsinstantie maken met de constructor, bijvoorbeeld:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Evenementen

De collapsklasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de ineenstortingsfunctionaliteit.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})