Source

Ñembyaipa

Embohasa mba’ekuaarã jehechauka nde proyecto tuichakue javeve mbovymi mbo’esyry ha ore JavaScript mboajepyréva reheve.

Mba’éichapa omba’apo

Pe JavaScript ñemboguejyha ojepuru ojehechauka ha oñeñomi hag̃ua mbaꞌekuaarã. Umi botón térã ancla ojepuru disparador ramo oñembohapéva umi elemento específico rembohasávape. Oñemboguejývo peteĩ elemento omoingovéva pe heightoúva it's valor ko'áĝagua guive 0. Oñeme’ẽvo mba’éichapa CSS oñatende umi animación rehe, ndaikatúi reipuru paddingpeteĩ .collapseelemento rehe. Upéva rangue, eipuru pe clase peteĩ elemento de envoltura independiente ramo.

Tembiecharã

Emboguejy umi botón iguýpe ehechauka ha emokañy hag̃ua ambue elemento mbo’esyry ñemoambue rupive:

  • .collapseomokañy contenido
  • .collapsingojeporu umi transición aja
  • .collapse.showohechauka contenido rehegua

Ikatu reipuru peteĩ joajuha oguerekóva hrefatributo, térã peteĩ botón oguerekóva data-targetatributo. Mokõivévape, data-toggle="collapse"oñeikotevẽ pe.

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>

Heta mba’e ojehupytyséva

A <button>térã <a>ikatu ohechauka ha omokañy heta elemento oñembohapévo peteĩ JQuery jeporavoha ndive i hreftérã data-targetatributo-pe. Múltiple <button>térã <a>ikatu ohechauka ha omokañy peteĩ elemento peteĩteĩva oñembohasáramo hese i hreftérã data-targetatributo reheve

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

Acordeón techapyrã

Eipurúvo componente tarjeta rehegua, ikatu embopuku pe comportamiento colapso por defecto emoheñói hag̃ua peteĩ acordeón.

Anim pariatur cliché reprehenderit, enim eiusmod tekove yvate accusamus terry richardson ad calamar. 3 lobo jasy officia aute, no cupidatat patineta dolor brunch rehegua. Tembi'u kamiõ quinoa nesciunt laborum eiusmod. Brunch 3 lobo jasy tempor, sunt aliqua omoĩ peteĩ guyra hi'ári calamar café de origen único nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, artesanía cerveza labore wes anderson cred nesciunt sapiente ea proident rehegua. Anuncio vegano exceptor carnicero vice lomo rehegua. Polainas occaecat cerveza artesanal granja-a-mesa, crudo denim estético sintetizador nesciunt oiméne nerehendúi chuguikuéra accusamus labore sostenible 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.
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">
      <h5 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>
      </h5>
    </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">
      <h5 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>
      </h5>
    </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">
      <h5 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>
      </h5>
    </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>

Accesibilidad rehegua

Ejesareko katuete emoĩve aria-expandedhag̃ua pe elemento control rehegua. Ko atributo ombohasa explícitamente estado ko'ágã elemento plegable ojoajúva control umi lector pantalla ha tecnologías de ayuda ojoajúva. Pe elemento oñembotykuaáva oñembotýramo por defecto, pe atributo oĩva elemento control rehegua oguerekovaꞌerã peteĩ valor aria-expanded="false". Emohenda ramo elemento oñembotykuaáva ojepeꞌa hag̃ua por defecto eipurúvo showmboꞌepy, emohenda aria-expanded="true"control-pe hendaguépe. Pe plugin ombohasáta ijeheguiete ko atributo control-pe oñemopyendáva ojepeꞌa térã oñembotýpa térã nahániri pe elemento oñembotykuaáva (JavaScript rupive, térã puruhára omoñepyrũgui ambue elemento control rehegua oñembojoajúva avei peteĩchagua elemento collapsbile rehe). Pe elemento control elemento HTML rehegua ndahaꞌeiramo peteĩ botón (techapyrã, peteĩ <a>térã <div>), pe atributorole="button"oñembojoapyva’erã elemento rehe.

Nde elemento control rehegua ojepytasóramo peteĩ elemento oñembotykuaáva rehe – heꞌiséva pe data-targetatributo ohechauka peteĩ idselector-pe – emoĩvaꞌerã pe aria-controlsatributo elemento control rehegua, oguerekóva pe idelemento oñembotykuaáva rehegua. Umi pantalla moñeꞌerã koꞌag̃agua ha umi tecnología pytyvõrã ojoguáva oipuru ko atributo omeꞌe hag̃ua puruhárape tape mbykymi ambuéva oho hag̃ua directamente elemento oñembotykuaávape voi.

Eñamindu’u Bootstrap ñemboguata ko’áĝagua ndoikói opaichagua teclado joaju oñemombe’úva WAI-ARIA Authoring Practices 1.1 acordeón jeporupyre - tekotevẽta emoinge ko’ãva ndete voi JavaScript jeporupyre reheve.

Jeporu rehegua

Pe plugin colapso oipuru mbovymi mbo’esyry omaneha hag̃ua pe levantamiento pohýi:

  • .collapseomokañy pe contenido
  • .collapse.showohechauka mba’épa oguereko
  • .collapsingoñembojoapy oñepyrũvo jehaipyre, ha ojeipeꞌa opa vove

Ko’ã mbo’esyry ikatu ojejuhu _transitions.scss.

Umi atributo de datos rupive

Oñemoĩnte data-toggle="collapse"ha peteĩ data-targetelemento-pe oñemeꞌe hag̃ua ijeheguiete control peteĩ térã hetave elemento oñembotykuaáva rehegua. Pe data-targetatributo omoneĩ peteĩ CSS jeporavoha omoĩ hag̃ua pe ñemboguejy. Ejesareko porãke emoĩ hag̃ua pe mboꞌepy collapsepe elemento oñembotývape. Oipotáramo ojepe’a por defecto, emoĩve pe clase adicional show.

Oñemoĩ hag̃ua acordeón-ichagua jesareko aty rehegua peteĩ área oñembotykuaávape, emoĩve atributo dato rehegua data-parent="#selector". Ehechamína pe demostración rehecha hag̃ua kóva acción-pe.

JavaScript rupive

Emboguata manualmente ko’ãva ndive:

$('.collapse').collapse()

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-parent="".

Téra Hesegua Upevakuére Techaukaha
túva ha sy selector rehegua | jQuery mba'e | Elemento DOM rehegua japu Oñemeꞌeramo túva, upéicharamo opaite elemento oñembotykuaáva túva ojeꞌevaꞌekue guýpe oñembotýta ojehechauka jave ko mbaꞌe oñembotykuaáva. (ojoguaite acordeón reko yma guarépe - kóva odepende cardclase rehe). Pe atributo oñemohendavaꞌerã pe área oñembotýva destino rehe.
toggle rehegua booleano rehegua teete Ombohasa elemento oñemboguejýva ñehenói jave

Método-kuéra rehegua

Método ha transición asíncrono rehegua

Opaite API rembiaporã haꞌehína asíncrono ha oñepyrũ peteĩ jehasapa . Ojevy hikuái ohenóivape oñepyrũvove pe transición ha katu opa mboyve . Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .

Ehecha ore kuatiañe’ẽ JavaScript rehegua reikuaave hag̃ua.

.collapse(options)

Omomba’apo ne contenido peteĩ elemento oñemboguejýva ramo. Omoneĩ peteĩ opción opcional object.

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

.collapse('toggle')

Ombohasa peteĩ elemento oñembotykuaáva ojehechauka térã oñeñomi hag̃ua. Ojevy ohenóivape ojehechauka térã oñeñomi mboyve añetehápe elemento oñembotýva (heꞌiséva oiko mboyve shown.bs.collapsetérã hidden.bs.collapsembaꞌe ojehúva).

.collapse('show')

Ohechauka peteĩ elemento oñembotykuaáva. Ojevy ohenóivape ojehechauka mboyve añetehápe elemento oñembotykuaáva (heꞌiséva oiko mboyve pe shown.bs.collapsembaꞌe ojehúva).

.collapse('hide')

Oñomi peteĩ elemento oñembotykuaáva. Ojevy ohenóivape oñeñomi mboyve añetehápe elemento oñembotykuaáva (heꞌiséva oiko mboyve pe hidden.bs.collapsembaꞌe ojehúva).

.collapse('dispose')

Ombyai peteĩ elemento ñembyai.

Umi mba’e oikóva

Bootstrap clase de colapso ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad colapso-pe.

Tipo de Evento rehegua Techaukaha
ohechauka.bs.collapso Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave showmétodo instancia rehegua.
ojehechauka.bs.oñemboguejy Ko mbaꞌe ojehúva oñembogue ojejapo jave peteĩ elemento collapso ojehecha hag̃ua puruhárape (ohaꞌarõta oñembotývo umi CSS jehasaha).
omokañy.bs.oñemboguejy Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hidemétodo.
kañymby.bs.oñemboguejy Ko mbaꞌe ojehúva oñembogue oñeñomi jave peteĩ elemento collapso puruháragui (ohaꞌarõta oñembotývo umi CSS jehasaha). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})