Bryder sammen

Skift synligheden af indhold på tværs af dit projekt med nogle få klasser og vores JavaScript-plugins.

Hvordan det virker

Collapse JavaScript-plugin'et bruges til at vise og skjule indhold. Knapper eller ankre bruges som udløsere, der er knyttet til bestemte elementer, du skifter til. Hvis du skjuler et element, animeres det heightfra dets aktuelle værdi til 0. I betragtning af hvordan CSS håndterer animationer, kan du ikke bruge paddingpå et .collapseelement. Brug i stedet klassen som et selvstændigt indpakningselement.

Animationseffekten af denne komponent afhænger af prefers-reduced-motionmedieforespørgslen. Se afsnittet om reduceret bevægelse i vores tilgængelighedsdokumentation .

Eksempel

Klik på knapperne nedenfor for at vise og skjule et andet element via klasseændringer:

.collapseskjuler indhold
.collapsinganvendes under overgange
.collapse.showviser indhold

Du kan bruge et link med hrefattributten eller en knap med data-targetattributten. I begge tilfælde er det data-toggle="collapse"påkrævet.

Link til href

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>

Flere mål

En <button>eller <a>kan vise og skjule flere elementer ved at henvise til dem med en JQuery-vælger i dens hrefeller data-targetattribut. Flere <button>eller <a>kan vise og skjule et element, hvis de hver især refererer til det med deres hrefeller data-targetattribut

Skift første element

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>

Eksempel på harmonika

Ved at bruge kortkomponenten kan du udvide standardsammenbrudsadfærden for at skabe en harmonika. For korrekt at opnå harmonikastilen skal du sørge for at bruge .accordionsom indpakning.

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 sætte en fugl på det blæksprutte single-oprindelse kaffe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegansk excepteur slagter vice lomo. Leggings occaecat craft beer farm-to-table, rå denim æstetisk synth nesciunt du sikkert ikke har hørt om dem accusamus labore bæredygtig 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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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>

Tilgængelighed

Sørg for at tilføje aria-expandedtil kontrolelementet. Denne attribut formidler eksplicit den aktuelle tilstand af det sammenklappelige element, der er knyttet til styringen, til skærmlæsere og lignende hjælpeteknologier. Hvis det sammenklappelige element er lukket som standard, skal attributten på kontrolelementet have en værdi på aria-expanded="false". Hvis du har indstillet det sammenklappelige element til at være åbent som standard ved hjælp af showklassen, skal du indstille aria-expanded="true"på kontrolelementet i stedet. Plugin'et vil automatisk skifte denne attribut på kontrolelementet baseret på, om det sammenklappelige element er blevet åbnet eller lukket (via JavaScript, eller fordi brugeren udløste et andet kontrolelement, der også er bundet til det samme sammenklappelige element). Hvis kontrolelementets HTML-element ikke er en knap (f.eks. en <a>eller <div>), attributtenrole="button"skal tilføjes til elementet.

Hvis dit kontrolelement er målrettet mod et enkelt sammenklappeligt element - dvs. data-targetattributten peger på en idvælger - skal du tilføje aria-controlsattributten til kontrolelementet, der indeholder iddet sammenklappelige element. Moderne skærmlæsere og lignende hjælpeteknologier gør brug af denne egenskab til at give brugerne yderligere genveje til at navigere direkte til selve det sammenklappelige element.

Bemærk, at Bootstraps nuværende implementering ikke dækker de forskellige tastaturinteraktioner, der er beskrevet i WAI-ARIA Authoring Practices 1.1 harmonikamønsteret - du skal selv inkludere disse med tilpasset JavaScript.

Brug

Collapse-pluginnet bruger et par klasser til at håndtere de tunge løft:

.collapseskjuler indholdet
.collapse.showviser indholdet
.collapsingtilføjes, når overgangen starter, og fjernes, når den er færdig

Disse klasser kan findes i _transitions.scss.

Via dataattributter

Du skal blot tilføje data-toggle="collapse"og a data-targettil elementet for automatisk at tildele kontrol over et eller flere sammenfoldelige elementer. Attributten data-targetaccepterer en CSS-vælger at anvende sammenbruddet på. Sørg for at tilføje klassen collapsetil det sammenklappelige element. Hvis du vil have den til at åbne som standard, skal du tilføje den ekstra klasse show.

For at tilføje harmonika-lignende gruppestyring til et sammenklappeligt område skal du tilføje dataattributten data-parent="#selector". Se demoen for at se dette i aktion.

Via JavaScript

Aktiver manuelt med:

$('.collapse').collapse()

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-parent="".

Navn	Type	Standard	Beskrivelse
forælder	vælger \| jQuery objekt \| DOM element	falsk	Hvis overordnet er angivet, lukkes alle sammenfoldelige elementer under den angivne overordnede, når dette sammenklappelige element vises. (svarende til traditionel harmonikaadfærd - dette afhænger af `card`klassen). Attributten skal indstilles på det sammenklappelige målområde.
skifte	boolesk	rigtigt	Slår det sammenklappelige element til eller fra ved kald

Metoder

Asynkrone metoder og overgange

Alle API - metoder er asynkrone og starter en overgang . De vender tilbage til den, der ringer, så snart overgangen er startet, men før den slutter . Derudover vil et metodekald på en overgangskomponent blive ignoreret .

Se vores JavaScript-dokumentation for mere information .

`.collapse(options)`

Aktiverer dit indhold som et sammenklappeligt element. Accepterer en valgfri indstilling object.

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

`.collapse('toggle')`

Skifter et sammenklappeligt element til at blive vist eller skjult. Vender tilbage til den, der ringer, før det sammenklappelige element faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.collapseeller hidden.bs.collapseindtræffer).

`.collapse('show')`

Viser et sammenklappeligt element. Vender tilbage til den, der ringer, før det sammenklappelige element faktisk er blevet vist (dvs. før shown.bs.collapsehændelsen indtræffer).

`.collapse('hide')`

Skjuler et sammenklappeligt element. Vender tilbage til den, der ringer, før det sammenklappelige element rent faktisk er blevet skjult (dvs. før hidden.bs.collapsehændelsen indtræffer).

`.collapse('dispose')`

Ødelægger et elements sammenbrud.

Begivenheder

Bootstraps kollapsklasse afslører nogle få hændelser for at tilslutte sig sammenbrudsfunktionalitet.

Begivenhedstype	Beskrivelse
show.bs.kollaps	Denne hændelse udløses med det samme, når `show`instansmetoden kaldes.
vist.bs.kollaps	Denne hændelse udløses, når et sammenbrudselement er blevet gjort synligt for brugeren (vil vente på, at CSS-overgange er fuldført).
skjule.bs.kollapse	Denne hændelse udløses straks, når `hide`metoden er blevet kaldt.
skjult.bs.kollaps	Denne hændelse udløses, når et sammenbrudselement er blevet skjult for brugeren (vil vente på, at CSS-overgange er fuldført).

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