Kollaps

Hur det fungerar

JavaScript-pluginet för kollaps används för att visa och dölja innehåll. Knappar eller ankare används som utlösare som mappas till specifika element som du växlar. Om du komprimerar ett element animeras det heightfrån dess nuvarande värde till 0. Med tanke på hur CSS hanterar animationer kan du inte använda paddingpå ett .collapseelement. Använd istället klassen som ett oberoende omslagselement.

Exempel

Klicka på knapparna nedan för att visa och dölja ett annat element via klassändringar:

• .collapsedöljer innehåll
• .collapsingtillämpas under övergångar
• .collapse.showvisar innehåll

I allmänhet rekommenderar vi att du använder en knapp med data-bs-targetattributet. Även om det inte rekommenderas ur en semantisk synvinkel, kan du också använda en länk med hrefattributet (och ett role="button"). I båda fallen data-bs-toggle="collapse"krävs.

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

Horisontell

Insticksprogrammet för kollaps stöder även horisontell kollaps. Lägg till .collapse-horizontalmodifieringsklassen för att övergå till widthistället för heightoch ställ in a widthpå det omedelbara underordnade elementet. Skriv gärna din egen anpassade Sass, använd inline-stilar eller använd våra breddverktyg .

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

Flera mål

En <button>eller <a>kan visa och dölja flera element genom att referera till dem med en väljare i dess hrefeller data-bs-targetattribut. Flera <button>eller <a>kan visa och dölja ett element om var och en refererar till det med sitt hrefeller data-bs-targetattribut

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

Tillgänglighet

Var noga med att lägga aria-expandedtill kontrollelementet. Det här attributet förmedlar explicit det aktuella tillståndet för det hopfällbara elementet kopplat till kontrollen till skärmläsare och liknande hjälpmedelstekniker. Om det hopfällbara elementet är stängt som standard ska attributet på kontrollelementet ha värdet aria-expanded="false". Om du har angett att det hopfällbara elementet ska vara öppet som standard med showklassen, ställ in aria-expanded="true"på kontrollen istället. Insticksprogrammet växlar automatiskt detta attribut på kontrollen baserat på om det hopfällbara elementet har öppnats eller stängts (via JavaScript, eller för att användaren utlöste ett annat kontrollelement som också är kopplat till samma hopfällbara element). Om kontrollelementets HTML-element inte är en knapp (t.ex. en <a>eller <div>), attributetrole="button"bör läggas till elementet.

Om ditt kontrollelement är inriktat på ett enstaka hopfällbart element – ​​dvs data-bs-targetattributet pekar på en idväljare – bör du lägga till aria-controlsattributet till kontrollelementet som innehåller iddet hopfällbara elementet. Moderna skärmläsare och liknande hjälpmedel använder detta attribut för att ge användarna ytterligare genvägar för att navigera direkt till själva det hopfällbara elementet.

Observera att Bootstraps nuvarande implementering inte täcker de olika valfria tangentbordsinteraktionerna som beskrivs i ARIA Authoring Practices Guide dragspelsmönster - du måste inkludera dessa själv med anpassad JavaScript.

Sass

Variabler

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

Klasser

Kollapsövergångsklasser kan hittas i scss/_transitions.scsseftersom dessa delas över flera komponenter (kollaps och dragspel).

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

Användande

Kollapspluginen använder några klasser för att hantera tunga lyft:

• .collapsedöljer innehållet
• .collapse.showvisar innehållet
• .collapsingläggs till när övergången startar och tas bort när den är klar

Dessa klasser finns i _transitions.scss.

Via dataattribut

Lägg bara till data-bs-toggle="collapse"och ett data-bs-targettill elementet för att automatiskt tilldela kontroll över ett eller flera hopfällbara element. Attributet data-bs-targetaccepterar en CSS-väljare att tillämpa komprimeringen på. Se till att lägga till klassen collapsei det hopfällbara elementet. Om du vill att den ska öppnas som standard lägger du till den extra klassen show.

Lägg till dataattributet för att lägga till dragspelsliknande grupphantering till ett hopfällbart område data-bs-parent="#selector". Se dragspelssidan för mer information.

Via JavaScript

Aktivera manuellt med:

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

alternativ

Eftersom alternativ kan skickas via dataattribut eller JavaScript kan du lägga till ett alternativnamn till data-bs-, som i data-bs-animation="{value}". Se till att ändra fallets typ av alternativnamnet från " camelCase " till " kebab-case " när du skickar alternativen via dataattribut. Använd till exempel data-bs-custom-class="beautifier"istället för data-bs-customClass="beautifier".

Från och med Bootstrap 5.2.0 stöder alla komponenter ett experimentellt reserverat dataattribut data-bs-configsom kan hysa enkel komponentkonfiguration som en JSON-sträng. När ett element har data-bs-config='{"delay":0, "title":123}'och data-bs-title="456"attribut kommer det slutliga titlevärdet att vara 456och de separata dataattributen kommer att åsidosätta värden som ges på data-bs-config. Dessutom kan befintliga dataattribut innehålla JSON-värden som data-bs-delay='{"show":0,"hide":150}'.

Metoder

Aktiverar ditt innehåll som ett hopfällbart element. Accepterar ett valfritt alternativ object.

Du kan skapa en kollapsinstans med konstruktorn, till exempel:

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

evenemang

Bootstraps kollapsklass avslöjar några händelser för att koppla in kollapsfunktionalitet.

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