ꯋꯥꯟꯡꯕ

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯀꯣꯂꯥꯞꯁ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤ ꯀꯟꯇꯦꯟꯇ ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯕꯇꯅꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯑꯦꯉ꯭ꯀꯔꯁꯤꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯕꯥ ꯑꯀꯛꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯃꯦꯞ ꯇꯧꯕꯥ ꯇ꯭ꯔꯤꯒꯔꯁꯤꯡ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯀꯣꯂꯥꯞꯁ ꯇꯧꯕꯅꯥ heightꯃꯁꯤꯒꯤ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯚꯦꯜꯌꯨ ꯑꯁꯤꯗꯒꯤ 0. CSSꯅꯥ ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡ ꯀꯔꯝꯅꯥ ꯍꯦꯟꯗꯜ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯌꯦꯡꯂꯒꯥ, ꯅꯍꯥꯛꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ paddingꯑꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯔꯣꯏ꯫ .collapseꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯃꯅꯤꯡꯇꯝꯕꯥ ꯔꯦꯄꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯈꯨꯗꯝ

ꯀ꯭ꯂꯥꯁ ꯍꯣꯡꯗꯣꯛ-ꯍꯣꯡꯖꯤꯟ ꯇꯧꯕꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯇꯣꯞꯄꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯕꯇꯅꯁꯤꯡ ꯑꯁꯤ ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯣ:

• .collapseꯀꯟꯇꯦꯟꯇ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫
• .collapsingꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡꯒꯤ ꯃꯇꯃꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫
• .collapse.showꯀꯟꯇꯦꯟꯇ ꯎꯠꯂꯤ꯫

data-bs-targetꯃꯍꯧꯁꯥꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯇꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯄꯥꯎꯇꯥꯛ ꯄꯤꯔꯤ꯫ ꯁꯦꯃꯦꯟꯇꯤꯛ ꯑꯣꯏꯕꯥ ꯃꯤꯠꯌꯦꯡꯗꯒꯤ ꯔꯤꯀꯃꯦꯟꯗ ꯇꯧꯗ꯭ꯔꯤꯉꯩꯗꯥ, ꯅꯍꯥꯛꯅꯥ hrefꯑꯦꯠꯔꯤꯕꯤꯎꯠ (ꯑꯃꯁꯨꯡ a role="button")ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯤꯉ꯭ꯛ ꯑꯃꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ ꯀꯦꯁ ꯑꯅꯤꯃꯛꯇꯥ, ꯗꯤ data-bs-toggle="collapse"ꯑꯁꯤ ꯃꯊꯧ ꯇꯥꯏ꯫

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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>

ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯄꯥꯟꯗꯃꯁꯤꯡ꯫

A <button>ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯒꯤ ꯅꯠꯠꯔꯒꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯇꯥ <a>ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯔꯤꯐꯔꯦꯟꯁ ꯇꯧꯗꯨꯅꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯄꯥ ꯌꯥꯏ꯫ ꯃꯜꯇꯤꯄꯜ ꯅꯠꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯈꯣꯌ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯅꯠꯠꯔꯒꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯔꯤꯐꯔꯦꯟꯁ ꯇꯧꯔꯕꯗꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯄꯥ ꯌꯥꯏ꯫hrefdata-bs-target<button><a>hrefdata-bs-target

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

aria-expandedꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯃꯁꯤꯒꯤ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯁꯤꯅꯥ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯀꯟꯠꯔꯣꯂꯒꯥ ꯇꯤꯡꯂꯕꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇꯀꯤ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯐꯤꯚꯝ ꯑꯗꯨ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯇꯥꯀꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯂꯣꯗ ꯇꯧꯔꯕꯗꯤ, ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯂꯩꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯒꯤ ꯚꯦꯜꯌꯨ ꯑꯗꯨ aria-expanded="false". ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ showꯀ꯭ꯂꯥꯁ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯑꯣꯄꯟ ꯇꯧꯅꯕꯥ ꯁꯦꯠ ꯇꯧꯔꯕꯗꯤ, aria-expanded="true"ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯀꯟꯠꯔꯣꯂꯗꯥ ꯁꯦꯠ ꯇꯧ꯫ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯍꯥꯡꯗꯣꯀꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯗ ꯇꯧꯕꯥ (ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ, ꯅꯠꯠꯔꯒꯥ ꯌꯨꯖꯔꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯥ ꯇꯤꯡꯂꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯁꯨ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ) ꯌꯨꯝꯐꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯀꯟꯠꯔꯣꯂꯗꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯁꯤ ꯑꯣꯇꯣꯃꯦꯇꯦꯗ ꯑꯣꯏꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯒꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ HTML ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯕꯇꯟ ꯑꯃꯥ ꯑꯣꯏꯗ꯭ꯔꯕꯗꯤ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, an <a>ꯅꯠꯠꯔꯒꯥ <div>), ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨrole="button"ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯅꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯈꯛꯇꯃꯛ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯔꯕꯗꯤ – ꯍꯥꯌꯕꯗꯤ data-bs-targetꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯅꯥ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯗꯥ ꯄꯣꯏꯟꯇ ꯇꯧꯔꯕꯗꯤ – ꯅꯍꯥꯛꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯀꯟꯠꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ idꯍꯥꯄꯀꯗꯕꯅꯤ , ꯃꯁꯤꯗꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯗꯨ ꯌꯥꯎꯒꯗꯕꯅꯤ꯫ ꯃꯣꯗꯔꯟ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯅꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯌꯨꯖꯔꯁꯤꯡꯗꯥ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯃꯁꯥꯃꯛꯇꯗꯥ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯆꯠꯅꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯁꯣꯔꯇꯀꯥꯠꯁꯤꯡ ꯄꯤꯔꯤ꯫aria-controlsid

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯍꯧꯖꯤꯛꯀꯤ ꯏꯃꯞꯂꯤꯃꯦꯟꯇꯦꯁꯟ ꯑꯁꯤꯅꯥ WAI-ARIA ꯑꯣꯊꯣꯔꯤꯡ ꯄ꯭ꯔꯦꯛꯇꯤꯁꯁꯤꯡ 1.1 ꯑꯦꯀꯣꯔꯗꯟ ꯄꯦꯇꯔꯅꯗꯥ ꯄꯅꯈ꯭ꯔꯤꯕꯥ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯀꯤꯕꯣꯔꯗ ꯏꯟꯇꯔꯦꯛꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯀꯣꯅꯁꯤꯅꯗꯦ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ - ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯁꯥꯅꯥ ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯌꯥꯎꯍꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯒꯅꯤ꯫

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

$transition-collapse:         height .35s ease;

ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

ꯀꯣꯂꯥꯞꯄꯁ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ scss/_transitions.scssꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ (ꯀꯣꯂꯥꯄꯁ ꯑꯃꯁꯨꯡ ꯑꯦꯀꯣꯔꯗꯟ) ꯁꯦꯌꯔ ꯇꯧꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯃꯁꯤꯗꯥ ꯐꯪꯒꯅꯤ꯫

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯀꯣꯂꯥꯞꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯍꯦꯚꯤ ꯂꯤꯐꯇꯤꯡ ꯍꯦꯟꯗꯜ ꯇꯧꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯈꯔꯥ ꯁꯤꯖꯤꯟꯅꯩ:

• .collapseꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫
• .collapse.showꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯎꯠꯂꯤ꯫
• .collapsingꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯍꯧꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ, ꯑꯃꯁꯨꯡ ꯂꯣꯏꯔꯕꯥ ꯃꯇꯃꯗꯥ ꯂꯧꯊꯣꯀꯏ꯫

ꯍꯥꯌꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ _transitions.scss.

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯃꯗꯒꯤ ꯍꯦꯅꯕꯥ ꯀꯟꯠꯔꯣꯜ ꯑꯗꯨ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯦꯁꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ data-bs-toggle="collapse"ꯑꯃꯁꯨꯡ ꯑꯦ ꯈꯛꯇꯃꯛ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ data-bs-targetꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨꯅꯥ data-bs-targetꯀꯣꯂꯥꯞꯁ ꯑꯗꯨ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯅꯕꯥ CSS ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯥ ꯌꯥꯔꯦ꯫ collapseꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯍꯥꯡꯗꯣꯀꯄꯥ ꯄꯥꯝꯂꯕꯗꯤ, ꯑꯍꯦꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯍꯥꯄꯆꯤꯜꯂꯨ show.

ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯔꯤꯌꯥ ꯑꯃꯗꯥ ꯑꯦꯀꯣꯔꯗꯅꯒꯨꯝꯕꯥ ꯒ꯭ꯔꯨꯞ ꯃꯦꯅꯦꯖꯃꯦꯟꯇ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ, ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯍꯥꯄꯆꯤꯜꯂꯨ data-bs-parent="#selector". ꯃꯁꯤ ꯊꯕꯛ ꯑꯣꯏꯅꯥ ꯎꯅꯕꯒꯤꯗꯃꯛ ꯗꯦꯃꯣ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯤꯌꯨ:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-bs-, data-bs-parent="".

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯀꯣꯂꯥꯞꯁꯤꯕꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯑꯦꯛꯇꯤꯚ ꯇꯧꯏ꯫ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯌꯥꯔꯦ object.

ꯀꯟꯁꯠꯔꯛꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯣꯂꯥꯞꯁ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯏ, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯀꯣꯂꯥꯄꯁ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯀꯣꯂꯥꯄꯁ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯗꯥ ꯍꯨꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯊꯧꯗꯣꯛ ꯈꯔꯥ ꯑꯦꯛꯁꯄꯣꯖ ꯇꯧꯏ꯫

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})