Passà à u cuntenutu principale Salta à a navigazione di documenti
in English

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

In generale, ricumandemu di utilizà un buttone cù l' data-bs-targetattributu. Mentre ùn hè micca cunsigliatu da un puntu di vista semanticu, pudete ancu aduprà un ligame cù l' hrefattributu (è un role="button"). In i dui casi, data-bs-toggle="collapse"hè necessariu.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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>

Orizzontale

U plugin collapse supporta ancu u colapsing horizontale. Aghjunghjite a .collapse-horizontalclassa di modificatore per a transizione widthinvece di heightè stabilisce a widthnantu à l'elementu zitellu immediata. Sentite liberu di scrive u vostru propiu Sass persunalizatu, aduprate stili in linea, o aduprate e nostre utilità di larghezza .

Per piacè nutate chì mentre l'esempiu quì sottu hà un min-heightset per evità di rimpianti eccessivi in ​​i nostri documenti, questu ùn hè micca esplicitamente necessariu. Solu l' widthelementu di u zitellu hè necessariu.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<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>

Obiettivi multipli

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

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

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 nantu à 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 colapsibile - vale à dì l' data-bs-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 tastiere opzionali descritte in u mudellu di accordione di WAI-ARIA Authoring Practices 1.1 - avete bisognu di includà queste stessu cù JavaScript persunalizatu.

Sass

Variabili

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

Classi

E classi di transizione di colapsu ponu esse truvate in scss/_transitions.scssquantu sò spartuti in parechje cumpunenti (collapse è accordion).

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

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-bs-toggle="collapse"è a data-bs-targetà l'elementu per assignà automaticamente u cuntrollu di unu o più elementi colapsibile. L' data-bs-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-bs-parent="#selector". Consultate a pagina di l'accordione per più infurmazione.

Via JavaScript

Abilita manualmente cù:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Opzioni

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

Nome Tipu Default Descrizzione
parent selettore | oggettu jQuery | Elementu DOM false Se u genitore hè furnitu, allora tutti l'elementi pieghevoli sottu u genitore specificatu seranu chjusi quandu questu articulu pieghevule hè mostratu. (simile à u cumpurtamentu tradiziunale di l'accordioni - questu dipende da a cardclasse). L'attributu deve esse stabilitu nantu à l'area colapsible di destinazione.
toggle booleanu true 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 .

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

Pudete creà una istanza di colapsu cù u custruttore, per esempiu:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Metudu Descrizzione
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).
show Mostra un elementu colapsable. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente mostratu (per esempiu, prima chì l' shown.bs.collapseavvenimentu si faci).
hide Oculta un elementu colapsable. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu oculatu (per esempiu, prima chì l' hidden.bs.collapseavvenimentu si faci).
dispose Distrughje u colapsu di un elementu. (Elimina i dati almacenati nantu à l'elementu DOM)
getInstance Metudu staticu chì permette di ottene l'istanza di colapsu assuciata à un elementu DOM, pudete aduprà cusì:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Metudu staticu chì torna una istanza di colapsu assuciata à un elementu DOM o crea un novu in casu ùn hè micca inizializatu. Pudete aduprà cusì:bootstrap.Collapse.getOrCreateInstance(element)

Avvenimenti

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

Tipu di avvenimentu Descrizzione
show.bs.collapse Questu avvenimentu spara immediatamente quandu u showmetudu di istanza hè chjamatu.
shown.bs.collapse Questu avvenimentu hè sparatu quandu un elementu di colapsu hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
hide.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).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})