Source

Collapse

Cambia a visibilità di u cuntenutu in u vostru prughjettu cù uni pochi di classi è i nostri plugins JavaScript.

Cumu funziona

U plugin JavaScript collapse hè utilizatu per vede è oculte u cuntenutu. I buttoni o l'ancore sò usati cum'è attivatori chì sò mappati à elementi specifichi chì toggle. Collapsed un elementu animarà u heightda u so valore attuale à 0. Data cumu CSS gestisce l'animazioni, ùn pudete micca aduprà paddingnantu à un .collapseelementu. Invece, aduprate a classa cum'è un elementu di imballaggio indipendente.

L'effettu di l'animazione di stu cumpunente dipende da a prefers-reduced-motionmedia query. Vede a sezione di movimentu ridottu di a nostra documentazione d'accessibilità .

Esempiu

Cliccate i buttoni sottu per vede è ammuccià un altru elementu via cambiamenti di classi:

  • .collapseoculta u cuntenutu
  • .collapsinghè appiicata durante a transizione
  • .collapse.showmostra u cuntenutu

Pudete aduprà un ligame cù l' hrefattributu, o un buttone cù l' data-targetattributu. In i dui casi, data-toggle="collapse"hè necessariu.

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>

Obiettivi multipli

A <button>o <a>pò mostrà è ammuccià parechji elementi riferenduli cù un selettore JQuery in u so hrefo data-targetattributu. Multiple <button>o <a>ponu mostrà è ammuccià un elementu se ognunu riferenzi cù u so hrefo data-targetattributu

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

Esempiu di accordion

Utilizendu u cumpunente di a carta , pudete allargà u cumpurtamentu di colapsu predeterminatu per creà un accordione. Per ottene bè u stilu d'accordioni, assicuratevi di utilizà .accordioncum'è wrapper.

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 lupu luna tempor, sunt aliqua mette un uccello nantu à u calamaru caffè uni origine 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 probabilmente ùn avete micca intesu parlà di elli accusamus 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.

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>

L'accessibilità

Assicuratevi di aghjunghje aria-expandedà l'elementu di cuntrollu. Questu attributu trasmette esplicitamente u statu attuale di l'elementu colapsibile ligatu à u cuntrollu à i lettori di schermu è tecnulugii assistivi simili. Se l'elementu colapsibile hè chjusu per automaticamente, l'attributu nantu à l'elementu di cuntrollu deve avè un valore di aria-expanded="false". Se avete stabilitu l'elementu colapsibile per esse apertu per automaticamente usendu a showclassa, mette aria-expanded="true"nantu à u cuntrollu invece. U plugin cambia automaticamente stu attributu nantu à u cuntrollu basatu annantu à se l'elementu colapsibile hè statu apertu o chjusu (via JavaScript, o perchè l'utilizatore hà attivatu un altru elementu di cuntrollu ancu ligatu à u stessu elementu colapsable). Se l'elementu HTML di l'elementu di cuntrollu ùn hè micca un buttone (per esempiu, un <a>o <div>), l'attributurole="button"deve esse aghjuntu à l'elementu.

Se u vostru elementu di cuntrollu hè destinatu à un unicu elementu colapsable - vale à dì l' data-targetattributu punta à un idselettore - duvete aghjunghje l' aria-controlsattributu à l'elementu di cuntrollu, chì cuntene l' idelementu colapsable. I lettori di schermu muderni è tecnulugii d'assistenza simili facenu usu di questu attributu per furnisce l'utilizatori cù accurtatoghji supplementari per navigà direttamente à l'elementu colapsibile stessu.

Nota chì l'implementazione attuale di Bootstrap ùn copre micca e diverse interazzioni di u teclatu descritte in u mudellu d'accordione WAI-ARIA Authoring Practices 1.1 - avete bisognu di includà queste stessu cù JavaScript persunalizatu.

Usu

U plugin di colapsu utilizeghja uni pochi di classi per trattà a carica pesante:

  • .collapseoculta u cuntenutu
  • .collapse.showmostra u cuntenutu
  • .collapsinghè aghjuntu quandu a transizione principia, è eliminata quandu finisce

Queste classi ponu esse truvate in _transitions.scss.

Via attributi di dati

Basta aghjunghje data-toggle="collapse"è a data-targetà l'elementu per assignà automaticamente u cuntrollu di unu o più elementi colapsibile. L' data-targetattributu accetta un selettore CSS per applicà u colapsu. Assicuratevi di aghjunghje a classa collapseà l'elementu colapsable. Se vulete chì l'apertura predefinita, aghjunghje a classa supplementaria show.

Per aghjunghje una gestione di gruppu cum'è accordioni à una zona colapsibile, aghjunghje l'attributu di dati data-parent="#selector". Consultate a demo per vede questu in azione.

Via JavaScript

Abilita manualmente cù:

$('.collapse').collapse()

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-parent="".

Nome Tipu Default Descrizzione
parenti selettore | oggettu jQuery | Elementu DOM falsu Se u genitore hè furnitu, allora tutti l'elementi pieghevoli sottu u genitore specificatu seranu chjusi quandu questu articulu pieghevule hè mostratu. (simili à u cumpurtamentu tradiziunale di l'accordioni - questu dipende da a cardclasse). L'attributu deve esse stabilitu nantu à l'area colapsible di destinazione.
toggle booleanu veru Commuta l'elementu colapsibile nantu à l'invucazione

I metudi

Metudi asincroni è transizioni

Tutti i metudi API sò asincroni è cumincianu una transizione . Ritornanu à u chjamante appena a transizione hè iniziata, ma prima chì finisce . Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .

Vede a nostra documentazione JavaScript per più infurmazione .

.collapse(options)

Attiva u vostru cuntenutu cum'è un elementu colapsable. Accetta opzioni opzionali object.

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

.collapse('toggle')

Cambia un elementu pieghevule per esse mostratu o oculatu. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.collapseo hidden.bs.collapsesi faci).

.collapse('show')

Mostra un elementu colapsable. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente mostratu (vale à dì prima chì l' shown.bs.collapseavvenimentu si faci).

.collapse('hide')

Oculta un elementu colapsable. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente oculatu (vale à dì prima chì l' hidden.bs.collapseavvenimentu si faci).

.collapse('dispose')

Distrughje u colapsu di un elementu.

Avvenimenti

A classa di colapsu di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità di colapsu.

Tipu d'avvenimentu Descrizzione
mostra.bs.collapse Questu avvenimentu spara immediatamente quandu u showmetudu di istanza hè chjamatu.
mostratu.bs.collapse Questu avvenimentu hè sparatu quandu un elementu di colapsu hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
nascondere.bs.collapse Stu avvenimentu hè sparatu immediatamente quandu u hidemetudu hè statu chjamatu.
hidden.bs.collapse Questu avvenimentu hè sparatu quandu un elementu di colapsu hè statu oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})