ꯋꯥꯟꯡꯕ
ꯀ꯭ꯂꯥꯁ ꯈꯔ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯄꯨꯝꯕꯗꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯚꯤꯖꯤꯕꯤꯂꯤꯇꯤ ꯇꯣꯒꯜ ꯇꯧꯕꯤꯌꯨ꯫
ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫
ꯀꯣꯂꯥꯞꯁ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤ ꯀꯟꯇꯦꯟꯇ ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯕꯇꯅꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯑꯦꯉ꯭ꯀꯔꯁꯤꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯕꯥ ꯑꯀꯛꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯃꯦꯞ ꯇꯧꯕꯥ ꯇ꯭ꯔꯤꯒꯔꯁꯤꯡ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯀꯣꯂꯥꯞꯁ ꯇꯧꯕꯅꯥ height
ꯃꯁꯤꯒꯤ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯚꯦꯜꯌꯨ ꯑꯁꯤꯗꯒꯤ 0
. CSSꯅꯥ ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡ ꯀꯔꯝꯅꯥ ꯍꯦꯟꯗꯜ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯌꯦꯡꯂꯒꯥ, ꯅꯍꯥꯛꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ padding
ꯑꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯔꯣꯏ꯫ .collapse
ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯃꯅꯤꯡꯇꯝꯕꯥ ꯔꯦꯄꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫
prefers-reduced-motion
ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯗꯣꯀꯨꯃꯦꯟꯇꯦꯁꯅꯒꯤ ꯍꯟꯊꯔꯀꯄꯥ ꯃꯣꯁꯟ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ
.
ꯈꯨꯗꯝ
ꯀ꯭ꯂꯥꯁ ꯍꯣꯡꯗꯣꯀꯄꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯇꯣꯞꯄꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯅꯕꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯕꯇꯅꯁꯤꯡ ꯑꯁꯤ ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯣ:
.collapse
ꯀꯟꯇꯦꯟꯇ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫.collapsing
ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡꯒꯤ ꯃꯇꯃꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫.collapse.show
ꯀꯟꯇꯦꯟꯇ ꯎꯠꯂꯤ꯫
data-target
ꯃꯍꯧꯁꯥꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯇꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯄꯥꯎꯇꯥꯛ ꯄꯤꯔꯤ꯫ ꯁꯦꯃꯦꯟꯇꯤꯛ ꯑꯣꯏꯕꯥ ꯃꯤꯠꯌꯦꯡꯗꯒꯤ ꯔꯤꯀꯃꯦꯟꯗ ꯇꯧꯗ꯭ꯔꯤꯉꯩꯗꯥ, ꯅꯍꯥꯛꯅꯥ href
ꯑꯦꯠꯔꯤꯕꯤꯎꯠ (ꯑꯃꯁꯨꯡ a role="button"
)ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯤꯉ꯭ꯛ ꯑꯃꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ ꯀꯦꯁ ꯑꯅꯤꯃꯛꯇꯥ, ꯗꯤ data-toggle="collapse"
ꯑꯁꯤ ꯃꯊꯧ ꯇꯥꯏ꯫
<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>
ꯑꯐꯩꯕ
ꯀꯣꯂꯥꯞꯄꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯀꯣꯂꯥꯄꯁꯅꯁꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯇꯧꯅꯕꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ .width
ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯆꯥꯏꯜꯗ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ a ꯁꯦꯠ ꯇꯧ꯫ ꯑꯗꯣꯃꯒꯤ ꯏꯁꯥꯒꯤ ꯀꯁ꯭ꯇꯝ ꯁꯥꯁ ꯏꯕꯤꯌꯨ, ꯏꯅꯂꯥꯏꯟ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯤꯌꯨ, ꯅꯠꯔꯒꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯋꯥꯏꯗ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯤꯌꯨ .width
height
width
min-height
ꯑꯩꯈꯣꯌꯒꯤ ꯗꯣꯀꯁꯤꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯔꯤꯄꯦꯏꯟꯇ ꯇꯧꯗꯅꯕꯥ ꯁꯦꯠ ꯑꯃꯥ ꯂꯩꯔꯕꯁꯨ, ꯃꯁꯤ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯃꯊꯧ ꯇꯥꯗꯦ꯫
ꯑꯣꯟ ꯗꯤ ꯆꯥꯏꯜꯗ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯈꯛꯇꯃꯛ ꯃꯊꯧ ꯇꯥꯏ꯫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>
ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯄꯥꯟꯗꯃꯁꯤꯡ꯫
A <button>
ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯒꯤ ꯅꯠꯠꯔꯒꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯇꯥ <a>
JQuery ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯔꯦꯐꯥꯔꯦꯟꯁ ꯇꯧꯗꯨꯅꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯄꯥ ꯌꯥꯏ꯫ ꯃꯜꯇꯤꯄꯜ ꯅꯠꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯈꯣꯌ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯅꯠꯠꯔꯒꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯔꯤꯐꯔꯦꯟꯁ ꯇꯧꯔꯕꯗꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯄꯥ ꯌꯥꯏ꯫href
data-target
<button>
<a>
href
data-target
<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
ꯔꯦꯄꯔ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯣꯌꯗꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫
.show
ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ꯫
<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>
ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫
aria-expanded
ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯃꯁꯤꯒꯤ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯁꯤꯅꯥ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯀꯟꯠꯔꯣꯂꯒꯥ ꯇꯤꯡꯂꯕꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇꯀꯤ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯐꯤꯚꯝ ꯑꯗꯨ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯇꯥꯀꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯂꯣꯗ ꯇꯧꯔꯕꯗꯤ, ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯂꯩꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯒꯤ ꯚꯦꯜꯌꯨ ꯑꯗꯨ aria-expanded="false"
. ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ show
ꯀ꯭ꯂꯥꯁ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯑꯣꯄꯟ ꯇꯧꯅꯕꯥ ꯁꯦꯠ ꯇꯧꯔꯕꯗꯤ, aria-expanded="true"
ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯀꯟꯠꯔꯣꯂꯗꯥ ꯁꯦꯠ ꯇꯧꯔꯣ. ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯍꯥꯡꯗꯣꯀꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯗ ꯇꯧꯕꯥ (ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ, ꯅꯠꯠꯔꯒꯥ ꯌꯨꯖꯔꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯥ ꯇꯤꯡꯂꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯁꯨ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯈꯤꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ) ꯌꯨꯝꯐꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯀꯟꯠꯔꯣꯂꯗꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯁꯤ ꯑꯣꯇꯣꯃꯦꯇꯦꯗ ꯑꯣꯏꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯒꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ HTML ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯕꯇꯟ ꯑꯃꯥ ꯑꯣꯏꯗ꯭ꯔꯕꯗꯤ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, an <a>
ꯅꯠꯠꯔꯒꯥ <div>
), ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨrole="button"
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ꯫
ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯅꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯈꯛꯇꯃꯛ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯔꯕꯗꯤ – ꯍꯥꯌꯕꯗꯤ data-target
ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯅꯥ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯗꯥ ꯄꯣꯏꯟꯇ ꯇꯧꯔꯕꯗꯤ – ꯅꯍꯥꯛꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ id
ꯍꯥꯄꯀꯗꯕꯅꯤ , ꯃꯁꯤꯗꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯗꯨ ꯌꯥꯎꯒꯗꯕꯅꯤ꯫ ꯃꯣꯗꯔꯟ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯅꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯌꯨꯖꯔꯁꯤꯡꯗꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯃꯁꯥꯃꯛꯇꯗꯥ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯆꯠꯅꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯁꯣꯔꯇꯀꯥꯠꯁꯤꯡ ꯄꯤꯔꯤ꯫aria-controls
id
ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯍꯧꯖꯤꯛꯀꯤ ꯏꯃꯞꯂꯤꯃꯦꯟꯇꯦꯁꯟ ꯑꯁꯤꯅꯥ ARIA ꯑꯣꯊꯣꯔꯤꯡ ꯄ꯭ꯔꯦꯛꯇꯤꯁꯁꯤꯡ ꯒꯥꯏꯗ ꯑꯦꯀꯣꯔꯗꯟ ꯄꯦꯇꯔꯅꯗꯥ ꯄꯅꯈ꯭ꯔꯤꯕꯥ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯀꯤꯕꯣꯔꯗ ꯏꯟꯇꯔꯦꯛꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯀꯣꯅꯁꯤꯅꯗꯦ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ - ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯁꯥꯅꯥ ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯌꯥꯑꯣꯍꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯒꯅꯤ꯫
ꯁꯤꯖꯤꯟꯅꯕꯥ꯫
ꯀꯣꯂꯥꯞꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯍꯦꯚꯤ ꯂꯤꯐꯇꯤꯡ ꯍꯦꯟꯗꯜ ꯇꯧꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯈꯔꯥ ꯁꯤꯖꯤꯟꯅꯩ:
.collapse
ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫.collapse.show
ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯎꯠꯂꯤ꯫.collapsing
ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯍꯧꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ, ꯑꯃꯁꯨꯡ ꯂꯣꯏꯔꯕꯥ ꯃꯇꯃꯗꯥ ꯂꯧꯊꯣꯀꯏ꯫
ꯍꯥꯌꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ _transitions.scss
.
ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫
ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯃꯗꯒꯤ ꯍꯦꯅꯕꯥ ꯀꯟꯠꯔꯣꯜ ꯑꯗꯨ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯦꯁꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ data-toggle="collapse"
ꯑꯃꯁꯨꯡ ꯑꯦ ꯈꯛꯇꯃꯛ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ data-target
ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯅꯥ data-target
ꯀꯣꯂꯥꯞꯁ ꯑꯗꯨ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯅꯕꯥ CSS ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯥ ꯌꯥꯔꯦ꯫ collapse
ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯍꯥꯡꯗꯣꯀꯄꯥ ꯄꯥꯝꯂꯕꯗꯤ, ꯑꯍꯦꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯍꯥꯄꯆꯤꯜꯂꯨ show
.
ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯔꯤꯌꯥ ꯑꯃꯗꯥ ꯑꯦꯀꯣꯔꯗꯅꯒꯨꯝꯕꯥ ꯒ꯭ꯔꯨꯞ ꯃꯦꯅꯦꯖꯃꯦꯟꯇ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ, ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯍꯥꯄꯆꯤꯜꯂꯨ data-parent="#selector"
. ꯃꯁꯤ ꯊꯕꯛ ꯑꯣꯏꯅꯥ ꯎꯅꯕꯒꯤꯗꯃꯛ ꯗꯦꯃꯣ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫
ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫
ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯤꯌꯨ:
$('.collapse').collapse()
ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫
ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-
, data-parent=""
.
ꯃꯤꯡ | ꯃꯈꯜ | ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ | ꯋꯥꯔꯣꯜ |
---|---|---|---|
ꯃꯃꯥ-ꯃꯄꯥ ꯑꯣꯏꯕꯥ꯫ | ꯁꯦꯂꯦꯛꯇꯔ ꯇꯧꯕꯥ | jQuery ꯑꯣꯕꯖꯦꯛꯇ | ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ꯫ | ꯑꯔꯥꯟꯕ | ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯃꯥ-ꯃꯄꯥ ꯑꯗꯨ ꯄꯤꯔꯕꯗꯤ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯀꯛꯅꯕꯥ ꯃꯃꯥ-ꯃꯄꯥ ꯑꯗꯨꯒꯤ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯄꯨꯝꯅꯃꯛ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯥꯏꯇꯦꯝ ꯑꯁꯤ ꯎꯠꯄꯥ ꯃꯇꯃꯗꯥ ꯂꯣꯗ ꯇꯧꯒꯅꯤ꯫ (ꯇ꯭ꯔꯦꯗꯤꯁꯅꯦꯜ ꯑꯦꯀꯣꯔꯗꯟ ꯕꯤꯍꯦꯕꯤꯌꯔꯒꯥ ꯃꯥꯟꯅꯩ - ꯃꯁꯤ card ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ)꯫ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯇꯥꯔꯒꯦꯠ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯔꯤꯌꯥ ꯑꯗꯨꯗꯥ ꯁꯦꯠ ꯇꯧꯒꯗꯕꯅꯤ꯫ |
ꯇꯣꯒꯜ ꯇꯧꯕꯥ꯫ | ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ | ꯑꯆꯨꯝꯕ | ꯏꯅꯚꯣꯀꯦꯁꯟꯗꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ |
ꯄꯥꯝꯕꯩꯁꯤꯡ꯫
ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯃꯦꯊꯗꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ꯫
ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯤ ꯃꯦꯊꯗ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯥ ꯍꯧꯏ . ꯃꯈꯣꯌꯅꯥ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯍꯧꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯑꯗꯨꯕꯨ ꯂꯣꯏꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ . ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯇꯧꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯗꯥ ꯃꯦꯊꯗ ꯀꯣꯜ ꯑꯃꯥ ꯏꯒꯅꯣꯔ ꯇꯧꯒꯅꯤ .
ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯌꯦꯡꯕꯤꯌꯨ .
.collapse(options)
ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯑꯦꯛꯇꯤꯚ ꯇꯧꯏ꯫ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯌꯥꯔꯦ object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.collapse
ꯅꯠꯠꯔꯒꯥ hidden.bs.collapse
ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔꯗꯥ ꯍꯜꯂꯀꯏ꯫
.collapse('show')
ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯂꯤ꯫ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.collapse
ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔꯗꯥ ꯍꯜꯂꯀꯏ꯫
.collapse('hide')
ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ hidden.bs.collapse
ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔꯗꯥ ꯍꯜꯂꯀꯏ꯫
.collapse('dispose')
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯀꯣꯂꯥꯞꯁ ꯑꯗꯨ ꯃꯥꯡꯍꯜꯂꯤ꯫
ꯊꯧꯔꯃꯁꯤꯡ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯀꯣꯂꯥꯄꯁ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯀꯣꯂꯥꯄꯁ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯗꯥ ꯍꯨꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯊꯧꯗꯣꯛ ꯈꯔꯥ ꯑꯦꯛꯁꯄꯣꯖ ꯇꯧꯏ꯫
ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫ | ꯋꯥꯔꯣꯜ |
---|---|
ꯁꯣ.ꯕꯤ.ꯑꯦꯁ.ꯀꯣꯂꯥꯄꯁ ꯇꯧꯕꯥ꯫ | show ꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫ |
shown.bs.ꯀꯣꯂꯥꯄꯁ ꯇꯧꯕꯥ꯫ | ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯌꯨꯖꯔꯗꯥ ꯀꯣꯂꯥꯞꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯕꯥ ꯐꯪꯍꯅꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯏꯁꯤꯟꯅꯕꯥ ꯉꯥꯏꯒꯅꯤ)꯫ |
ꯂꯣꯠꯄꯥ.ꯕꯤ.ꯑꯦꯁ.ꯀꯣꯂꯥꯞꯁ ꯇꯧꯕꯥ꯫ | hide ꯃꯦꯊꯗ ꯑꯗꯨ ꯀꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫ |
ꯂꯣꯠꯁꯤꯜꯂꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯀꯣꯂꯥꯞꯁ ꯇꯧꯕꯥ꯫ | ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯌꯨꯖꯔꯗꯒꯤ ꯀꯣꯂꯥꯞꯄꯁ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯏꯁꯤꯟꯅꯕꯥ ꯉꯥꯏꯒꯅꯤ)꯫ |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})