Kokwea

Toggle visibilité ya contenus na kati ya projet na yo na mua ba classes na ba plugins na biso ya JavaScript.

Ndenge oyo esalaka

Plugin ya JavaScript ya kokweya esalelamaka mpo na kolakisa mpe kobomba makambo oyo ezali na kati. Ba boutons to ba ancres esalelamaka lokola ba déclencheur oyo e mapé na ba éléments spécifiques oyo o toggler. Ko collapser élément moko eko animer la heightdepuis valeur na yango ya lelo na 0. Soki totali ndenge CSS esimbaka ba animations, okoki te kosalela paddingna .collapseélément moko. Na esika ya kosala bongo, salelá kelasi lokola eloko ya kokanga oyo ezali na boyokani te.

Effet ya animation ya composante oyo ezali dépendant na prefers-reduced-motionrequête ya média. Tala eteni ya mouvement réduit ya mikanda na biso ya accessibilité .

Ndakisa

Finá na ba boutons oyo ezali awa na nse mpo na kolakisa mpe kobomba eloko mosusu na nzela ya mbongwana ya kelasi:

.collapseebombaka makambo oyo ezali na kati
.collapsingesalelamaka na ntango ya mbongwana
.collapse.showelakisaka makambo oyo ezali na kati

Okoki kosalela lien oyo ezali na hrefattribut, to bouton oyo ezali na data-targetattribut. Na makambo nyonso mibale, data-toggle="collapse"esɛngami.

Lien na 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>

Ba cibles ebele

A <button>to <a>ekoki kolakisa mpe kobomba ba éléments ebele na kosala référence na yango na selecteur ya JQuery na attribut na yango hrefto data-target. Multiple <button>to <a>bakoki kolakisa pe kobomba élément moko soki bango moko na moko azali ko référer yango na bango hrefto data-targetattribut

Toggle élément ya liboso

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>

Ndakisa ya accordéon

Na kosalelaka eteni ya karte , okoki kobakisela bizaleli ya kokwea na ndenge ya liboso mpo na kosala accordéon. Mpo na kokokisa malamu lolenge ya accordéon, kobosana te kosalela yango .accordionlokola enveloppe.

Anim pariatur cliche reprehenderit, enim eiusmod bomoi ya likolo accusamus terry richardson ad calmar. 3 mbwa ya zamba sanza officia aute, non cupidat patin dolor brunch. Camion ya biloko ya kolia quinoa nesciunt laborum eiusmod. Brunch 3 mbwa ya zamba sanza tempor, sunt aliqua atie ndeke likolo na yango calmar café d'origine unique nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, mosala ya bière artisanat wes anderson cred nesciunt sapiente ea proident. Annonce vegan excepteur boucher vice lomo. Leggings occaecat bière artisanale ferme-à-mesa, brut denim esthétique synth nesciunt mbala mosusu oyoká te bango accusamus labore durable 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>

Kozala na makoki ya kozwa yango

Bozala sûr ya kobakisa aria-expandedna élément ya contrôle. Attribut oyo ezo transmettre explicitement état actuel ya élément collapsible lié na contrôle na ba lecteurs d'écran na ba technologies d'assistance ya ndenge wana. Soki élément collapsible ekangami na ndenge ya défaut, attribut na élément ya contrôle esengeli kozala na valeur ya aria-expanded="false". Soki otie élément collapsible ezala ouvert par défaut kosalela showclasse, tia aria-expanded="true"na contrôle na esika na yango. Plugin eko changer automatiquement attribut oyo na contrôle selon soki to te élément collapsible efungolami to ekangami (na nzela ya JavaScript, to mpo mosaleli a déclenché élément mosusu ya contrôle mpe ekangami na même élément collapsible). Soki élément HTML ya élément ya contrôle ezali bouton te (ndakisa, an <a>to <div>), attributrole="button"esengeli kobakisa yango na elemande yango.

Soki élément ya contrôle na yo ezali ko cibler élément moko collapsible – c’est-à-dire data-targetattribut ezali ko pointer idsélecteur moko – esengeli obakisa aria-controlsattribut na élément de contrôle, oyo ezali na idya élément collapsible. Ba lecteurs d’écran ya mikolo oyo mpe ba technologies ya assistance ya ndenge wana esalelaka attribut oyo mpo na kopesa ba usagers ba raccourcis ya kobakisa mpo na ko naviguer directement na élément collapsible yango moko.

Yeba ete bosaleli ya Bootstrap ya lelo etali te ba interactions ya clavier ndenge na ndenge oyo elimbolami na motindo ya accordéon ya WAI-ARIA Authoring Practices 1.1 - ekosenga otia yo moko oyo na JavaScript oyo olingi.

Kosalela yango

Plugin ya collapse esalelaka mua ba classes pona ko gérer levage ya kilo:

.collapseebombaka makambo oyo ezali na kati
.collapse.showelakisaka makambo oyo ezali na kati
.collapsingebakisami ntango mbongwana ebandi, mpe elongolami ntango esili

Bakelasi yango ekoki kozwama na _transitions.scss.

Na nzela ya ba attributs ya ba données

Bobakisa kaka data-toggle="collapse"mpe a data-targetna élément mpo na ko assigner automatiquement contrôle ya élément moko to ebele oyo ekoki ko collapsible. Attribut data-targetendimi moponi ya CSS mpo na kosalela collapse na yango. Bozala sûr ya kobakisa classe collapsena élément collapsible. Soki olingi ete efungwama na ndenge ya liboso, bakisá kelasi ya kobakisa show.

Mpo na kobakisa boyangeli ya etuluku lokola accordéon na esika oyo ekoki kokangama, bakisa attribut ya ba données data-parent="#selector". Tala démonstration po omona likambo oyo na action.

Na nzela ya JavaScript

Activer manuellement na:

$('.collapse').collapse()

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-parent="".

Nkombo	Lolenge	Mbeba	Ndimbola
moboti	moponi \| jEloko ya motuna \| Elemento DOM	lokuta	Soki moboti epesami, boye biloko nyonso oyo ekoki kokangama na nse ya moboti oyo elakisami ekokangama ntango eloko oyo ekoki kokangama elakisami. (ekokani na bizaleli ya bonkoko ya accordéon - yango etali `card`kelasi). Attribut esengeli ezala na esika oyo ekoki kokangama na cible.
kobongola makambo	boolean	ya solo	Ebalusaka élément collapsible na invocation

Ba méthodes ya kosala

Ba méthodes asynchrones na ba transitions

Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .

Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .

`.collapse(options)`

Active contenus na yo lokola élément collapsible. Andimi ba options moko ya option object.

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

`.collapse('toggle')`

Ezali kobongola eloko oyo ekoki kokangama mpo na kolakisa to kobombama. Ezongi na mobengi yambo ete eloko oyo ekoki kokangama ezala mpenza kolakisa to ebombama (elingi koloba liboso ete likambo shown.bs.collapseto hidden.bs.collapseesalema).

`.collapse('show')`

Ezali kolakisa eleman moko oyo ekoki kokangama. Ezongisaka na mobengi yambo ete eloko oyo ekoki kokangama elakisama mpenza (elingi koloba liboso ete shown.bs.collapselikambo esalema).

`.collapse('hide')`

Ebombaka eloko moko oyo ekoki kokangama. Ezongi na mobengi yambo ete eloko oyo ekoki kokangama ebombama mpenza (elingi koloba liboso ete hidden.bs.collapselikambo esalema).

`.collapse('dispose')`

Ebebisaka collapse ya élément moko.

Makambo oyo esalemaki

Classe ya collapse ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité ya collapse.

Lolenge ya likambo	Ndimbola
elakiseli.bs.kokwea	Evenement oyo ezo beta mbala moko tango `show`méthode ya instance ebengami.
elakisami.bs.kokwea	Evenement oyo ezo beta tango élément ya collapse esalemi visible na mosaleli (ekozela ba transitions ya CSS esila).
kobomba.bs.kokwea	Evenement oyo ebetamaka mbala moko tango `hide`méthode ebengami.
ebombami.bs.kokwea	Evenement oyo ezo beta tango élément ya collapse ebombami na mosaleli (ekozela ba transitions ya CSS esila).

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