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.

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-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-toggle="collapse"hè necessariu.

<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">
    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 .widthclassa 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-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      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ò 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

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

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.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" 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">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </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 colapsibile - 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 di accordionu di a Guida di Pratiche d'Autorità di ARIA - 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="".

I metudi

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

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