Gå til hovedinnhold Hopp til dokumentnavigering
in English

Kollapse

Bytt synligheten av innhold på tvers av prosjektet ditt med noen få klasser og JavaScript-plugins.

Hvordan det fungerer

Skjul JavaScript-pluginen brukes til å vise og skjule innhold. Knapper eller ankere brukes som utløsere som er tilordnet spesifikke elementer du veksler mellom. Hvis du skjuler et element, animeres det heightfra gjeldende verdi til 0. Gitt hvordan CSS håndterer animasjoner, kan du ikke bruke paddingpå et .collapseelement. Bruk i stedet klassen som et uavhengig innpakningselement.

Animasjonseffekten til denne komponenten er avhengig av prefers-reduced-motionmediesøket. Se delen for redusert bevegelse i tilgjengelighetsdokumentasjonen vår .

Eksempel

Klikk på knappene nedenfor for å vise og skjule et annet element via klasseendringer:

  • .collapseskjuler innhold
  • .collapsingbrukes under overganger
  • .collapse.showviser innhold

Generelt anbefaler vi å bruke en knapp med data-bs-targetattributtet. Selv om det ikke anbefales fra et semantisk synspunkt, kan du også bruke en lenke med hrefattributtet (og en role="button"). I begge tilfeller er det data-bs-toggle="collapse"nødvendig.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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>

Horisontal

Kollaps-pluginen støtter også horisontal kollaps. Legg til .collapse-horizontalmodifikatorklassen for å overføre i widthstedet for heightog angi en widthpå det umiddelbare underordnede elementet. Skriv gjerne din egen tilpassede Sass, bruk innebygde stiler eller bruk breddeverktøyene våre .

Vær oppmerksom på at selv om eksemplet nedenfor har et min-heightsett for å unngå overdreven maling i dokumentene våre, er dette ikke eksplisitt påkrevd. Bare widthon the child-elementet kreves.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<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>

Flere mål

En <button>eller <a>kan vise og skjule flere elementer ved å referere til dem med en velger i sin hrefeller data-bs-targetattributt. Flere <button>eller <a>kan vise og skjule et element hvis de refererer til det med sitt hrefeller data-bs-targetattributt

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

tilgjengelighet

Sørg for å legge aria-expandedtil kontrollelementet. Dette attributtet formidler eksplisitt den nåværende tilstanden til det sammenleggbare elementet knyttet til kontrollen til skjermlesere og lignende hjelpeteknologier. Hvis det sammenleggbare elementet er lukket som standard, skal attributtet på kontrollelementet ha en verdi på aria-expanded="false". Hvis du har satt det sammenleggbare elementet til å være åpent som standard ved hjelp av showklassen, sett aria-expanded="true"på kontrollen i stedet. Programtillegget vil automatisk veksle mellom dette attributtet på kontrollen basert på om det sammenleggbare elementet har blitt åpnet eller lukket (via JavaScript, eller fordi brukeren utløste et annet kontrollelement også knyttet til det samme sammenleggbare elementet). Hvis kontrollelementets HTML-element ikke er en knapp (f.eks. en <a>eller <div>), attributtetrole="button"skal legges til elementet.

Hvis kontrollelementet ditt målretter mot et enkelt sammenleggbart element – ​​dvs. at data-bs-targetattributtet peker til en idvelger – bør du legge til aria-controlsattributtet til kontrollelementet, som inneholder iddet sammenleggbare elementet. Moderne skjermlesere og lignende hjelpeteknologier bruker dette attributtet for å gi brukere ekstra snarveier for å navigere direkte til selve det sammenleggbare elementet.

Merk at Bootstraps nåværende implementering ikke dekker de ulike valgfrie tastaturinteraksjonene beskrevet i WAI-ARIA Authoring Practices 1.1 trekkspillmønsteret - du må inkludere disse selv med tilpasset JavaScript.

Sass

Variabler

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

Klasser

Kollapsovergangsklasser kan finnes i scss/_transitions.scssda disse deles på tvers av flere komponenter (kollaps og trekkspill).

.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);
  }
}

Bruk

Kollaps-pluginen bruker noen få klasser for å håndtere tunge løft:

  • .collapseskjuler innholdet
  • .collapse.showviser innholdet
  • .collapsinglegges til når overgangen starter, og fjernes når den er ferdig

Disse klassene finner du i _transitions.scss.

Via dataattributter

Bare legg til data-bs-toggle="collapse"og a data-bs-targettil elementet for automatisk å tildele kontroll over ett eller flere sammenleggbare elementer. Attributtet data-bs-targetgodtar en CSS-velger å bruke sammenbruddet på. Sørg for å legge klassen collapsetil det sammenleggbare elementet. Hvis du vil at den skal åpnes som standard, legger du til den ekstra klassen show.

For å legge til trekkspilllignende gruppestyring til et sammenleggbart område, legg til dataattributtet data-bs-parent="#selector". Se trekkspillsiden for mer informasjon.

Via JavaScript

Aktiver manuelt med:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-bs-, som i data-bs-parent="".

Navn Type Misligholde Beskrivelse
parent velger | jQuery objekt | DOM-element false Hvis overordnet er oppgitt, vil alle sammenleggbare elementer under den angitte overordnede bli lukket når dette sammenleggbare elementet vises. (ligner på tradisjonell trekkspilladferd - dette er avhengig av cardklassen). Attributten må settes på det sammenleggbare målet.
toggle boolsk true Veksler på det sammenleggbare elementet ved påkalling

Metoder

Asynkrone metoder og overganger

Alle API-metoder er asynkrone og starter en overgang . De går tilbake til den som ringer så snart overgangen er startet, men før den avsluttes . I tillegg vil et metodekall på en overgangskomponent bli ignorert .

Se vår JavaScript-dokumentasjon for mer informasjon .

Aktiverer innholdet ditt som et sammenleggbart element. Godtar et valgfritt alternativ object.

Du kan opprette en kollapsforekomst med konstruktøren, for eksempel:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Metode Beskrivelse
toggle Bytter et sammenleggbart element til vist eller skjult. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.collapseeller hidden.bs.collapseinntreffer).
show Viser et sammenleggbart element. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt vist (f.eks. før shown.bs.collapsehendelsen inntreffer).
hide Skjuler et sammenleggbart element. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt skjult (f.eks. før hidden.bs.collapsehendelsen inntreffer).
dispose Ødelegger et elements kollaps. (Fjerner lagrede data på DOM-elementet)
getInstance Statisk metode som lar deg få kollapsforekomsten knyttet til et DOM-element, du kan bruke det slik:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Statisk metode som returnerer en kollapsforekomst knyttet til et DOM-element eller oppretter en ny i tilfelle den ikke ble initialisert. Du kan bruke det slik:bootstrap.Collapse.getOrCreateInstance(element)

arrangementer

Bootstraps kollapsklasse avslører noen få hendelser for å koble seg til kollapsfunksjonalitet.

Hendelsestype Beskrivelse
show.bs.collapse Denne hendelsen utløses umiddelbart når showinstansmetoden kalles.
shown.bs.collapse Denne hendelsen utløses når et kollapselement er gjort synlig for brukeren (vil vente på at CSS-overganger er fullført).
hide.bs.collapse Denne hendelsen utløses umiddelbart når hidemetoden har blitt kalt.
hidden.bs.collapse Denne hendelsen utløses når et kollapselement er skjult for brukeren (vil vente på at CSS-overganger er fullført).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})