Collapse

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.

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.

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

<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

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

Innota chì l'implementazione attuale di Bootstrap ùn copre micca e diverse interazzioni di tastiere opzionali descritte in u mudellu di accordionu di a Guida di Pratiche d'Autorizazione ARIA - 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ù:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Opzioni

Siccomu l'opzioni ponu esse passati via attributi di dati o JavaScript, pudete appiccicà un nome d'opzione à data-bs-, cum'è in data-bs-animation="{value}". Assicuratevi di cambià u tipu di casu di u nome di l'opzione da " camelCase " à " kebab-case " quandu passanu l'opzioni via attributi di dati. Per esempiu, aduprà data-bs-custom-class="beautifier"invece di data-bs-customClass="beautifier".

A partire da Bootstrap 5.2.0, tutti i cumpunenti supportanu un attributu di dati riservatu sperimentaledata-bs-config chì pò accoglie una cunfigurazione di cumpunenti simplice cum'è una stringa JSON. Quandu un elementu hà data-bs-config='{"delay":0, "title":123}'è data-bs-title="456"attributi, u valore finali titleserà 456è l'attributi di dati separati anu da annullà i valori dati nantu à data-bs-config. Inoltre, l'attributi di dati esistenti sò capaci di allughjà valori JSON cum'è data-bs-delay='{"show":0,"hide":150}'.

I metudi

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

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

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Avvenimenti

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})