Ka bin

Kɔnɔkow yecogo caman wuli i ka porozɛ kɔnɔ ni kalan damadɔw ye ani an ka JavaScript fɛnw.

A bɛ baara kɛ cogo min na

JavaScript plugin min bɛ wele ko collapse, o bɛ kɛ ka kɔnɔkow jira ani k’u dogo. Butɔnw walima ankɔriw bɛ Kɛ i n’a fɔ triggers minnu bɛ karti Kɛ fɛn kɛrɛnkɛrɛnnenw na i bɛ minnu Toggle. Ni fɛn dɔ binna , o bɛna ɲɛnamaya di ka heightbɔ a nafa la sisan ka se 0. Ni an y’a jateminɛ ko CSS bɛ animationw ɲɛnabɔ cogo min na, i tɛ se ka baara paddingkɛ ni .collapseelement dɔ ye. O nɔ na, aw bɛ baara kɛ ni kalan ye i n’a fɔ fɛn min bɛ kɛ ka fɛnw siri ɲɔgɔn na.

Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲininkali de la. aw ye an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .

Misaliya

Butɔn minnu bɛ duguma, olu digi walasa ka fɛn wɛrɛ jira ani k’a dogo kalanso caman yeli fɛ:

.collapsekɔnɔkow bɛ dogo
.collapsingbɛ waleya fɛn caman tigɛli waatiw la
.collapse.showbɛ kɔnɔkow jira

Aw bɛ se ka baara kɛ ni jɛgɛnsira ye ni o fɛn hrefye, walima ni butɔni ye min bɛ ni o fɛn data-targetye. O ko fila bɛɛ la, a data-toggle="collapse"wajibiyalen don.

Link ni href ye

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>

Laɲini caman

A <button>walima <a>bɛ se ka fɛn caman jira ani k’u dogo ni u ɲɛfɔli ye ni JQuery sugandili ye a hrefwalima a ka data-targetfɛnsɛbɛnni na. Multiple <button>walima <a>bɛ Se ka fɛn dɔ Jira ani k’a dogo n’u kelen-kelen bɛɛ y’a Lajɛ n’u ka hrefwalima data-targetattribut ye

Toggle fɔlɔ element

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>

Accordion misali

Ni aw bɛ baara kɛ ni karti yɔrɔ ye, aw bɛ se ka collapse behavior default janya walasa ka accordéon dɔ dilan. Walasa ka accordéon cogoya sɔrɔ ka ɲɛ, aw ye aw jija ka baara kɛ ni .accordiona ye i n’a fɔ finimugu.

Anim pariatur cliche reprehenderit, enim eiusmod ɲɛnamaya sanfɛ accusamus terry richardson ad kalama. 3 waraba kalo officia aute, non cupidat patinage dolor brunch. Dumunikɛminɛn min bɛ wele ko quinoa nesciunt laborum eiusmod. Brunch 3 waraba kalo tempor, sunt aliqua bila kɔnɔ dɔ kan a kan squid kelen-origin kafe nulla assumenda shoreditch et. Nihil ani keffiyeh helvetica, bololabaarakɛlaw ka biyɛri baara wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur sosifa vice lomo. Leggings occaecat craft beer foro-ka-tabali, raw denim aesthetic synth nesciunt n'a sɔrɔ i ma mɛn u 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>

Seko ni dɔnko

Aw ye aw jija ka dɔ fara aria-expandeda kunbɛncogo kan. O jogo in bɛ fɛn min bɛ se ka bin, o min sirilen bɛ kunnafoni-falen-falen na, o cogoya jira k’a jɛya ka ɲɛsin ɛkran kalanbagaw ma ani o ɲɔgɔnna dɛmɛni fɛɛrɛw. Ni fɛn min bɛ se ka da ɲɔgɔn kan, o datugulen don ka kɛɲɛ ni a daminɛ ye, fɛn min bɛ kunnafonisɛbɛn kan, o ka kan ka kɛ ni nafa ye aria-expanded="false". N'i ye 'fɛn min bɛ Se ka Dabɔ, o Dabɔ ka Dabɔ ka Kɛɲɛ ni showkalasi ye, i bɛ Segin aria-expanded="true"'kɔnɔna na o nɔ na. Plugin bɛna o fɛn in Yɛlɛma a yɛrɛma kɔrɔsili kan ka da a kan ni fɛn min bɛ Se ka Dabɔ o dabɔra walima n’a Dabɔra (JavaScript fɛ, walima k’a sababu Kɛ baarakɛla ye kunnafoni-falen-falen wɛrɛ Lawuli min fana sirilen bɛ o fɛn kelen in na). Ni control element ka HTML element tɛ butɔni ye (misali la, an <a>walima <div>), attributrole="button"ka kan ka fara elementi kan.

Ni i ka kunnafoni-falen-falen-yɔrɔ bɛ ka fɛn kelen laɲini min bɛ Se ka Dabɔ – n’o ye data-targetfɛnɲɛnɛma bɛ ka idsugandilikɛla dɔ Jira – i ka kan ka aria-controlsfɛnɲɛnɛma Fàra kunnafoni-falen-falen-fɛn kan, min kɔnɔ fɛn min bɛ idSe ka Dabɔ. Bi ɛkran kalanbagaw ni o ɲɔgɔnna dɛmɛnanw bɛ baara kɛ ni o fɛn in ye walasa ka sira surun wɛrɛw di baarakɛlaw ma walasa u ka se ka taa yɔrɔ la min bɛ se ka dabɔ a yɛrɛ la.

A kɔlɔsi ko Bootstrap ka baarakɛcogo sisan tɛ klaviyeti ɲɔgɔndan suguyaw ɲɛfɔ minnu ɲɛfɔlen don WAI-ARIA Authoring Practices 1.1 accordion pattern kɔnɔ - i yɛrɛ bɛna a ɲini ka ninnu don a kɔnɔ ni JavaScript ladamulen ye.

Baarakɛcogo

Collapse plugin bɛ baara Kɛ ni kala damadɔ ye walasa ka girinmanw kɔrɔtacogo ɲɛnabɔ:

.collapsebɛ kɔnɔkow dogo
.collapse.showbɛ kɔnɔkow jira
.collapsingbɛ fara a kan ni tɛmɛsira daminɛna, ka bɔ ni a banna

O kalanw bɛ se ka sɔrɔ _transitions.scss.

Ka tɛmɛn donanw ka fɛnw kan

Dɔrɔn ka fara data-toggle="collapse"ani a data-targetkan fɛn in na walasa ka fɛn kelen walima fɛn caman minnu bɛ se ka da ɲɔgɔn kan, olu ka kɔrɔsili di otomatiki la. Attribut data-targetbɛ sɔn CSS sugandili dɔ ma walasa ka collapse (dakun) in waleya. Aw ye aw jija ka kalasi fara fɛn dɔ kan min bɛ collapsese ka wuli. N’i b’a fɛ a ka da wuli, i ka kalansen wɛrɛ fara a kan show.

Walasa ka kulu ɲɛnabɔli min bɛ i n’a fɔ accordion fara a kan yɔrɔ la min bɛ se ka da, i ka data attribute fara a kan data-parent="#selector". Aw ye demo lajɛ walasa ka nin ye wale la.

JavaScript fɛ

A bɛ se ka baara kɛ ni bolo ye ni:

$('.collapse').collapse()

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-parent="".

Tɔ̀gɔ	Ka sɛbɛen masin na	Fɔlɔ	Cogojirali
bangebaga	sugandilikɛla \| jQuery fɛn \| DOM yɔrɔ	nkalon	Ni bangebaga dira, o tuma na, fɛn minnu bɛ se ka dabɔ bangebaga kofɔlen jukɔrɔ, olu bɛɛ bɛna datugu ni nin fɛn min bɛ se ka da ɲɔgɔn kan, o jirala. (a bɛ tali kɛ laadala acordion kɛcogo la - o bɛ bɔ `card`kalasi de la). Attribut ka kan ka sigi laɲini collapsible yɔrɔ kan.
toggle (toggle) kɛ	boolean ye	sɛbɛ	A bɛ fɛn min bɛ Se ka Dabɔ, o bɛ Yɛlɛma weleli kan

Fɛɛrɛw

Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli

API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .

aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .

`.collapse(options)`

A bɛ i ka kɔnɔkow baara i n’a fɔ fɛn min bɛ se ka da ɲɔgɔn kan. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.

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

`.collapse('toggle')`

A bɛ fɛn dɔ wuli ka bɔ a nɔ na ka taa jira walima ka dogo. A bɛ Segin welebaga ma sani fɛn min bɛ Se ka Dabɔ o ka Jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.collapsewalima hidden.bs.collapseko kɛlen ka Kɛ).

`.collapse('show')`

A bɛ fɛn dɔ jira min bɛ se ka wuli. A bɛ Segin welebaga ma sani fɛn min bɛ Se ka Dabɔ o ka Jira tiɲɛ na (o kɔrɔ ye ko sani ko shown.bs.collapsein ka Kɛ).

`.collapse('hide')`

A bɛ fɛn dɔ dogo min bɛ Se ka Dabɔ. A bɛ Segin welebaga ma sani fɛn min bɛ Se ka Dabɔ o ka dogo tiɲɛ na (o kɔrɔ ye ko sanni ko hidden.bs.collapsein ka Kɛ).

`.collapse('dispose')`

A bɛ fɛn dɔ ka binkanni tiɲɛ.

Ko minnu kɛra

Bootstrap ka collapse class bɛ ko damadɔw jira ka ɲɛsin hooking into collapse functionality ma.

Ko kɛlen suguya	Cogojirali
jira.bs.ka bɔgɔbɔgɔ	O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni `show`misali fɛɛrɛ Weelera.
jiralen.bs.collapse ye	O ko in bɛ Fɔ ni fɛn dɔ Dònna 'kɔnɔ min bɛ Se ka Ye baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban).
dogo.bs.dafalen	O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni `hide`fɛɛrɛ in Weelela.
dogolen.bs.collapse ye	O ko in bɛ Fɔ ni fɛn dɔ dogolen dòn baarakɛla la (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban).

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