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.

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-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-toggle="collapse"nødvendig.

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

Horisontal

Kollaps-pluginen støtter også horisontal kollaps. Legg til .widthmodifikatorklassen 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 .

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

Flere mål

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

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

Trekkspill eksempel

Ved å bruke kortkomponenten kan du utvide standard kollapsatferd for å lage et trekkspill. For å oppnå trekkspillstilen riktig, sørg for å bruke .accordionsom omslag.

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

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-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 tastaturinteraksjonene som er beskrevet i ARIA Authoring Practices Guide trekkspillmønster - du må inkludere disse selv med tilpasset JavaScript.

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-toggle="collapse"og a data-targettil elementet for automatisk å tildele kontroll over ett eller flere sammenleggbare elementer. Attributtet data-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-parent="#selector". Se demoen for å se dette i aksjon.

Via JavaScript

Aktiver manuelt med:

$('.collapse').collapse()

Alternativer

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

Metoder

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('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).

.collapse('show')

Viser et sammenleggbart element. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt vist (dvs. før shown.bs.collapsehendelsen inntreffer).

.collapse('hide')

Skjuler et sammenleggbart element. Går tilbake til den som ringer før det sammenleggbare elementet faktisk har blitt skjult (dvs. før hidden.bs.collapsehendelsen inntreffer).

.collapse('dispose')

Ødelegger et elements kollaps.

arrangementer

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})