Strni

Preklopite vidnost vsebine v vašem projektu z nekaj razredi in našimi vtičniki JavaScript.

Kako deluje

Vtičnik JavaScript za strnitev se uporablja za prikaz in skrivanje vsebine. Gumbi ali sidra se uporabljajo kot sprožilci, ki so preslikani na določene elemente, ki jih preklapljate. Strnjenje elementa bo animiralo heightiz trenutne vrednosti v 0. Glede na to, kako CSS obravnava animacije, ne morete uporabiti paddingna .collapseelementu. Namesto tega uporabite razred kot neodvisen ovojni element.

Učinek animacije te komponente je odvisen od prefers-reduced-motionmedijske poizvedbe. Oglejte si razdelek o zmanjšanem gibanju v naši dokumentaciji o dostopnosti .

Primer

Kliknite spodnje gumbe, da prikažete ali skrijete drug element prek sprememb razreda:

.collapseskriva vsebino
.collapsingse uporablja med prehodi
.collapse.showprikazuje vsebino

Uporabite lahko povezavo z hrefatributom ali gumb z data-targetatributom. V obeh primerih data-toggle="collapse"je potrebno.

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

Več ciljev

A <button>ali <a>lahko prikaže in skrije več elementov tako, da se nanje sklicuje z izbirnikom JQuery v svojem atributu hrefali . data-targetVeč <button>ali <a>lahko prikaže in skrije element, če se vsak sklicuje nanj s svojim hrefali data-targetatributom

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

Primer harmonike

S komponento kartice lahko razširite privzeto vedenje strnjevanja, da ustvarite harmoniko. Da bi pravilno dosegli slog harmonike, se prepričajte, da uporabite .accordionkot ovoj.

Animacija pariatnega klišeja, ki ga je preprečevala, eiusmod high life obtožba terry richardson in lignji. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Tovornjak s hrano kvinoja nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it lignji kava z enim poreklom nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Oglas veganski razen mesarja vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt verjetno še niste slišali zanje acusamus labore sustainable 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>

Dostopnost

Bodite prepričani, da dodate aria-expandedv kontrolni element. Ta atribut izrecno posreduje trenutno stanje zložljivega elementa, povezanega s kontrolnikom, bralnikom zaslona in podobnim pomožnim tehnologijam. Če je zložljivi element privzeto zaprt, mora imeti atribut na nadzornem elementu vrednost aria-expanded="false". showČe ste z razredom nastavili, da je zložljivi element privzeto odprt, ga aria-expanded="true"namesto tega nastavite na kontrolniku. Vtičnik bo samodejno preklopil ta atribut na kontrolniku glede na to, ali je bil zložljivi element odprt ali zaprt (prek JavaScripta ali ker je uporabnik sprožil drug kontrolni element, prav tako povezan z istim elementom collapbile). Če element HTML kontrolnika ni gumb (npr. <a>ali <div>), atributrole="button"je treba dodati elementu.

Če vaš kontrolni element cilja na en sam zložljiv element – tj. data-targetatribut kaže na idizbirnik – dodajte aria-controlsatribut v kontrolni element, ki vsebuje idelement zložljivega elementa. Sodobni bralniki zaslona in podobne podporne tehnologije uporabljajo ta atribut, da uporabnikom zagotovijo dodatne bližnjice za navigacijo neposredno do samega zložljivega elementa.

Upoštevajte, da trenutna izvedba Bootstrapa ne pokriva različnih interakcij s tipkovnico, opisanih v vzorcu harmonike WAI-ARIA Authoring Practices 1.1 – te boste morali vključiti sami s prilagojenim JavaScriptom.

Uporaba

Vtičnik Collapse uporablja nekaj razredov za obvladovanje težkega dvigovanja:

.collapseskriva vsebino
.collapse.showprikazuje vsebino
.collapsing is added when the transition starts, and removed when it finishes

These classes can be found in _transitions.scss.

Via data attributes

Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class show.

To add accordion-like group management to a collapsible area, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

$('.collapse').collapse()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Name	Type	Default	Description
parent	selector \| jQuery object \| DOM element	false	If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area.
toggle	boolean	true	Toggles the collapsible element on invocation

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

`.collapse(options)`

Activates your content as a collapsible element. Accepts an optional options object.

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

`.collapse('toggle')`

Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).

`.collapse('show')`

Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (i.e. before the shown.bs.collapse event occurs).

`.collapse('hide')`

Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (i.e. before the hidden.bs.collapse event occurs).

`.collapse('dispose')`

Destroys an element’s collapse.

Events

Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.

Event Type	Description
show.bs.collapse	Ta dogodek se sproži takoj, ko `show`se pokliče metoda primerka.
prikazano.bs.zruši	Ta dogodek se sproži, ko je element strnjenja viden uporabniku (počakal bo, da se prehodi CSS zaključijo).
hide.bs.collapse	Ta dogodek se sproži takoj, ko `hide`je bila metoda poklicana.
hidden.bs.collapse	Ta dogodek se sproži, ko je bil strnjeni element skrit pred uporabnikom (počakal bo, da se zaključijo prehodi CSS).

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