Chim
I project pumpui chhunga content hmuh theihna chu class tlemte leh kan JavaScript plugins hmangin toggle rawh.
A hnathawh dan
Collapse JavaScript plugin hi content entir leh thup nan hman a ni. Button emaw anchor emaw hi trigger atan hman a ni a, chu chu element bik i toggle-naah mapped a ni. Element pakhat collapse chuan a height
value awm mek atanga 0
. CSS hian animation a enkawl dan ngaihtuah chuan element padding
pakhatah i hmang thei lo. .collapse
Chu ai chuan class chu independent wrapping element atan hmang zawk ang che.
prefers-reduced-motion
media query ah a innghat a ni. Kan accessibility documentation a reduced motion tih hi en la
.
Entirna
A hnuaia button te hi click la, class thlak danglam hmangin element dang a lantir leh thup ang:
.collapse
content a thup thin.collapsing
transition neih laiin hman a ni.collapse.show
thupui a lantir
data-target
A tlangpuiin attribute nei button hman kan rawt a ni. Semantic point of view atanga recommend loh laiin, href
attribute (leh a role="button"
) nei link pawh i hmang thei bawk. Heng pahnihah hian the data-toggle="collapse"
is required.
<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>
Khamphei
Collapse plugin hian horizontal collapsing a support bawk. Modifier class chu a aiah .width
transition turin add la, immediate child element ah a set rawh. Zalen takin mahni custom Sass ziak la, inline style hmang la, kan width utilities hmang rawh .width
height
width
min-height
kan docs-a repaint tam lutuk lo tura set a neih laiin, hei hi chiang taka tih a ngai lo tih hre reng ang che.
On the child element chauh a ngai a ni.width
<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>
Target tam tak a awm
A <button>
or hian a or attribute <a>
-a JQuery selector hmanga reference-in element tam tak a lantir thei a, a thup thei bawk. Multiple emaw element pakhat chu an or attribute hmanga an reference vek chuan an lantir thei a, an thup thei bawkhref
data-target
<button>
<a>
href
data-target
Element hmasa ber chu toggle rawh
<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>
Accordion entirnan
Card component hmang hian default collapse behavior chu extend la, accordion siam theih a ni. Accordion style dik taka tihhlawhtlin theih nan .accordion
wrapper atan hmang ngei ang che.
.show
class vang a ni.
<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>
A thlen theihna tur
aria-expanded
Control element ah hian add ngei ngei tur a ni. He attribute hian control-a inzawm collapsible element dinhmun chu screen reader leh a ang chi assistive technology-ah chiang takin a tarlang a ni. Collapsible element chu default-a khar a nih chuan control element-a attribute chuan value aria-expanded="false"
. show
Class hmangin collapsible element chu default-a open turin i set tawh a nih chuan aria-expanded="true"
control-ah set zawk rawh. Plugin hian he attribute hi control-ah hian collapsible element hawn leh khar a nih leh nih loh a zirin automatic-in a toggle ang (JavaScript hmangin, emaw, user-in control element dang pawh collapsible element ang chiaha inzawm a trigger avangin). Control element-a HTML element chu button a nih loh chuan (eg, an <a>
or <div>
), attributerole="button"
element-ah hian dah belh tur a ni.
I control element hian collapsible element pakhat a target a nih chuan – chu chu attribute chuan selector data-target
a kawhhmuh a nih chuan – control element-ah attribute chu i dah tur a ni a, chutah chuan of the collapsible element a awm tur a ni. Tunlai screen reader leh a ang chi assistive technology te chuan he attribute hi an hmang a, chu chuan a hmangtute chu collapsible element ngeia direct-a kal theihna tur shortcut dang a pe a ni.id
aria-controls
id
Tuna Bootstrap hman mek hian ARIA Authoring Practices Guide accordion pattern -a tarlan keyboard interaction hrang hrangte chu a huam lo tih hre reng ang che - hengte hi nangmah ngeiin custom JavaScript nen i dah tel a ngai ang.
Hman dan tur
Collapse plugin hian heavy lifting handle turin class tlemte a hmang a:
.collapse
a thupui chu a thup thin.collapse.show
a thupui chu a entir a.collapsing
transition a tan hunah a dah belh a, a zawh chuan a paih leh bawk
Heng class te hi _transitions.scss
.
Data attribute hmangin a ni
Element ah add data-toggle="collapse"
leh a data-target
tih mai la, collapsible element pakhat emaw a aia tam emaw control chu automatic in a assign ang. Attribute hian data-target
collapse apply tur CSS selector a pawm a. collapse
Collapsible element ah hian class chu add ngei ngei tur a ni. Default open i duh chuan additional class kha add la show
.
Collapsible area-a accordion ang chi group management dah belh tur chuan data attribute data-parent="#selector"
. Hei hi action-a hmuh theih nan demo en rawh.
JavaScript hmangin
Manual hmangin enable theih a ni:
$('.collapse').collapse()
Thil thlan theih a ni
Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-
, data-parent=""
.
Hming | Lampang | Hlawhchhamna | Hrilhfiahna |
---|---|---|---|
nu leh pa | thlangtu | jQuery thil awmzia | DOM element a ni | diklo | Parent pek a nih chuan he collapsible item hi a lan hunah parent tarlan hnuaia collapsible element zawng zawng chu khar vek a ni ang. card (traditional accordion behavior nen a inang - hei hi class -ah a innghat ). Attribute chu target collapsible area-ah set a ngai a ni. |
toggle a ni | boolean a ni | dik | Invocation-ah collapsible element a toggle thin |
Thiltih dan tur
Asynchronous method leh inthlak danglamna te
API method zawng zawng hi asynchronous a ni a , transition a tan vek a ni . Transition an tan veleh mahse a tawp hmain call tu hnenah an kir leh thin . Chu bakah, transitioning component-a method call chu ngaihthah a ni ang .
.collapse(options)
I content chu collapsible element angin a activate thin. A pawm a, optional options a awm object
bawk .
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Collapsible element chu show emaw hidden emaw ah a toggle thin. Collapsible element chu a takin a lan hma emaw a thup hmain (chu chu shown.bs.collapse
or hidden.bs.collapse
event a thlen hmain) caller hnenah a kir leh thin.
.collapse('show')
Collapsible element a lantir. Collapsible element a lan tak tak hmain (chu chu shown.bs.collapse
event a thlen hmain) caller hnenah a kir leh thin.
.collapse('hide')
Collapsible element a thup thei. Collapsible element chu a takin a thup hmain (chu chu hidden.bs.collapse
event a thlen hmain) caller hnenah a kir leh thin.
.collapse('dispose')
Element pakhat collapse a tichhe thin.
Thil thlengte
Bootstrap-a collapse class hian collapse functionality-a hook theihna tur event tlemte a pholang a ni.
Thil thleng chi hrang hrang | Hrilhfiahna |
---|---|
show.bs.collapse tih a ni | show He event hi instance method kan koh chuan a fire nghal vek a ni. |
tih a ni.bs.collapse | He event hi collapse element pakhat user hmuh theiha siam a nih chuan fired a ni (CSS transition zawh hun a nghak ang). |
thup.bs.collapse tih hi a ni | hide He event hi method koh a nih chuan a fire nghal a ni. |
thup.bs.collapse tih a ni | He event hi user hnen atanga collapse element thup a nih chuan a fire thin (CSS transition zawh hun a nghak ang). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})