ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
in English

ਸਮੇਟਣਾ

ਕੁਝ ਕਲਾਸਾਂ ਅਤੇ ਸਾਡੇ JavaScript ਪਲੱਗਇਨਾਂ ਨਾਲ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਮੱਗਰੀ ਦੀ ਦਿੱਖ ਨੂੰ ਟੌਗਲ ਕਰੋ।

ਕਿਦਾ ਚਲਦਾ

ਸਮੇਟਣਾ JavaScript ਪਲੱਗਇਨ ਸਮੱਗਰੀ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਬਟਨਾਂ ਜਾਂ ਐਂਕਰਾਂ ਨੂੰ ਟਰਿਗਰਾਂ ਵਜੋਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਦੁਆਰਾ ਟੌਗਲ ਕਰਦੇ ਹੋਏ ਖਾਸ ਤੱਤਾਂ ਨਾਲ ਮੈਪ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਕਿਸੇ ਤੱਤ ਨੂੰ ਸਮੇਟਣ ਨਾਲ heightਇਸ ਦੇ ਮੌਜੂਦਾ ਮੁੱਲ ਤੋਂ 0. paddingCSS ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਕਿਵੇਂ ਹੈਂਡਲ ਕਰਦਾ ਹੈ, ਇਸ ਨੂੰ ਦੇਖਦੇ ਹੋਏ, ਤੁਸੀਂ ਕਿਸੇ .collapseਤੱਤ 'ਤੇ ਨਹੀਂ ਵਰਤ ਸਕਦੇ । ਇਸਦੀ ਬਜਾਏ, ਕਲਾਸ ਨੂੰ ਇੱਕ ਸੁਤੰਤਰ ਰੈਪਿੰਗ ਐਲੀਮੈਂਟ ਵਜੋਂ ਵਰਤੋ।

ਇਸ ਕੰਪੋਨੈਂਟ ਦਾ ਐਨੀਮੇਸ਼ਨ ਪ੍ਰਭਾਵ prefers-reduced-motionਮੀਡੀਆ ਪੁੱਛਗਿੱਛ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਪਹੁੰਚਯੋਗਤਾ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਘਟਾਏ ਗਏ ਮੋਸ਼ਨ ਭਾਗ ਨੂੰ ਦੇਖੋ ।

ਉਦਾਹਰਨ

ਕਲਾਸ ਤਬਦੀਲੀਆਂ ਰਾਹੀਂ ਕਿਸੇ ਹੋਰ ਤੱਤ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰੋ:

  • .collapseਸਮੱਗਰੀ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ
  • .collapsingਪਰਿਵਰਤਨ ਦੌਰਾਨ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ
  • .collapse.showਸਮੱਗਰੀ ਦਿਖਾਉਂਦਾ ਹੈ

data-bs-targetਆਮ ਤੌਰ 'ਤੇ, ਅਸੀਂ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਇੱਕ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ । ਜਦੋਂ ਕਿ ਸਿਮੇਂਟਿਕ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਤੋਂ ਸਿਫ਼ਾਰਿਸ਼ ਨਹੀਂ ਕੀਤੀ ਜਾਂਦੀ, ਤੁਸੀਂ hrefਵਿਸ਼ੇਸ਼ਤਾ (ਅਤੇ a role="button") ਦੇ ਨਾਲ ਇੱਕ ਲਿੰਕ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ। ਦੋਵਾਂ ਮਾਮਲਿਆਂ ਵਿੱਚ, data-bs-toggle="collapse"ਲੋੜੀਂਦਾ ਹੈ.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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

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.
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.
<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 ਐਲੀਮੈਂਟ ਇੱਕ ਬਟਨ ਨਹੀਂ ਹੈ (ਉਦਾਹਰਨ ਲਈ, ਇੱਕ <a>ਜਾਂ <div>), ਗੁਣrole="button"ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਿਲ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ.

ਜੇਕਰ ਤੁਹਾਡਾ ਨਿਯੰਤਰਣ ਤੱਤ ਇੱਕ ਸਿੰਗਲ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾ ਰਿਹਾ ਹੈ - ਭਾਵ data-bs-targetਗੁਣ ਇੱਕ idਚੋਣਕਾਰ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰ ਰਿਹਾ ਹੈ - ਤਾਂ ਤੁਹਾਨੂੰ aria-controlsਕੰਟਰੋਲ ਐਲੀਮੈਂਟ ਵਿੱਚ ਗੁਣ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ idਸਮੇਟਣਯੋਗ ਤੱਤ ਸ਼ਾਮਲ ਹੈ। ਆਧੁਨਿਕ ਸਕ੍ਰੀਨ ਰੀਡਰ ਅਤੇ ਸਮਾਨ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਸਮੇਟਣਯੋਗ ਤੱਤ 'ਤੇ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਵਾਧੂ ਸ਼ਾਰਟਕੱਟ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਕਰਦੀਆਂ ਹਨ।

ਨੋਟ ਕਰੋ ਕਿ ਬੂਟਸਟਰੈਪ ਦਾ ਮੌਜੂਦਾ ਸਥਾਪਨ WAI-ARIA ਆਥਰਿੰਗ ਪ੍ਰੈਕਟਿਸ 1.1 ਐਕੋਰਡਿਅਨ ਪੈਟਰਨ ਵਿੱਚ ਵਰਣਿਤ ਵੱਖ-ਵੱਖ ਵਿਕਲਪਿਕ ਕੀਬੋਰਡ ਇੰਟਰੈਕਸ਼ਨਾਂ ਨੂੰ ਕਵਰ ਨਹੀਂ ਕਰਦਾ ਹੈ - ਤੁਹਾਨੂੰ ਇਹਨਾਂ ਨੂੰ ਖੁਦ ਕਸਟਮ JavaScript ਨਾਲ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ।

ਸੱਸ

ਵੇਰੀਏਬਲ

$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"ਅਤੇ a . ਵਿਸ਼ੇਸ਼ਤਾ ਸਮੇਟਣ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਇੱਕ CSS ਚੋਣਕਾਰ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੀ ਹੈ data-bs-target। ਕਲਾਸ ਨੂੰ ਸਮੇਟਣਯੋਗ ਤੱਤ ਵਿੱਚ data-bs-targetਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ । collapseਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਡਿਫੌਲਟ ਖੋਲ੍ਹਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਵਾਧੂ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ show

ਇੱਕ ਸਮੇਟਣਯੋਗ ਖੇਤਰ ਵਿੱਚ ਅਕਾਰਡੀਅਨ-ਵਰਗੇ ਸਮੂਹ ਪ੍ਰਬੰਧਨ ਨੂੰ ਜੋੜਨ ਲਈ, ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ data-bs-parent="#selector"। ਇਸ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਣ ਲਈ ਡੈਮੋ ਵੇਖੋ।

JavaScript ਰਾਹੀਂ

ਇਸ ਨਾਲ ਹੱਥੀਂ ਯੋਗ ਕਰੋ:

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

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-bs-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-bs-parent=""

ਨਾਮ ਟਾਈਪ ਕਰੋ ਡਿਫਾਲਟ ਵਰਣਨ
parent ਚੋਣਕਾਰ | jQuery ਵਸਤੂ | DOM ਤੱਤ false ਜੇਕਰ ਮਾਤਾ-ਪਿਤਾ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸ ਸਮੇਟਣਯੋਗ ਆਈਟਮ ਦੇ ਦਿਖਾਏ ਜਾਣ 'ਤੇ ਨਿਰਧਾਰਤ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਅਧੀਨ ਸਾਰੇ ਸਮੇਟਣਯੋਗ ਤੱਤ ਬੰਦ ਹੋ ਜਾਣਗੇ। (ਰਵਾਇਤੀ ਐਕੌਰਡੀਅਨ ਵਿਹਾਰ ਦੇ ਸਮਾਨ - ਇਹ cardਕਲਾਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ)। ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਟਾਰਗੇਟ ਸਮੇਟਣਯੋਗ ਖੇਤਰ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
toggle ਬੁਲੀਅਨ true ਬੇਨਤੀ 'ਤੇ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ

ਢੰਗ

ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਤਬਦੀਲੀਆਂ

ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ

ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ ਵੇਖੋ

ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦੇ ਰੂਪ ਵਿੱਚ ਕਿਰਿਆਸ਼ੀਲ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object

ਤੁਸੀਂ ਕੰਸਟਰਕਟਰ ਨਾਲ ਇੱਕ ਸਮੇਟਣ ਦੀ ਉਦਾਹਰਣ ਬਣਾ ਸਕਦੇ ਹੋ, ਉਦਾਹਰਨ ਲਈ:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
ਵਿਧੀ ਵਰਣਨ
toggle ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਦਿਖਾਉਣ ਜਾਂ ਲੁਕਾਉਣ ਲਈ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਸਮੇਟਣਯੋਗ ਤੱਤ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.collapseਜਾਂ hidden.bs.collapseਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
show ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦਿਖਾਉਂਦਾ ਹੈ। ਸਮੇਟਣਯੋਗ ਤੱਤ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਉਦਾਹਰਨ ਲਈ, shown.bs.collapseਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
hide ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਸਮੇਟਣਯੋਗ ਤੱਤ ਅਸਲ ਵਿੱਚ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਉਦਾਹਰਨ ਲਈ, hidden.bs.collapseਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
dispose ਇੱਕ ਤੱਤ ਦੇ ਪਤਨ ਨੂੰ ਨਸ਼ਟ ਕਰਦਾ ਹੈ। (DOM ਤੱਤ 'ਤੇ ਸਟੋਰ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ)
getInstance ਸਥਿਰ ਵਿਧੀ ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ DOM ਤੱਤ ਨਾਲ ਸੰਬੰਧਿਤ ਸਮੇਟਣ ਦੀ ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ, ਤੁਸੀਂ ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਵਰਤ ਸਕਦੇ ਹੋ:bootstrap.Collapse.getInstance(element)
getOrCreateInstance ਸਥਿਰ ਵਿਧੀ ਜੋ ਕਿਸੇ DOM ਐਲੀਮੈਂਟ ਨਾਲ ਜੁੜੀ ਇੱਕ ਸਮੇਟਣ ਦੀ ਉਦਾਹਰਨ ਵਾਪਸ ਕਰਦੀ ਹੈ ਜਾਂ ਇੱਕ ਨਵਾਂ ਬਣਾਉਂਦੀ ਹੈ ਜੇਕਰ ਇਹ ਸ਼ੁਰੂਆਤੀ ਨਹੀਂ ਕੀਤੀ ਗਈ ਸੀ। ਤੁਸੀਂ ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਵਰਤ ਸਕਦੇ ਹੋ:bootstrap.Collapse.getOrCreateInstance(element)

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਸਮੇਟਣ ਵਾਲੀ ਕਲਾਸ ਸਮੇਟਣ ਦੀ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ।

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
show.bs.collapse ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ showਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
shown.bs.collapse ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਸਮੇਟਣ ਦਾ ਤੱਤ ਉਪਭੋਗਤਾ ਨੂੰ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
hide.bs.collapse hideਜਦੋਂ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਕੱਢ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ .
hidden.bs.collapse ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਸਮੇਟਣ ਦਾ ਤੱਤ ਉਪਭੋਗਤਾ ਤੋਂ ਲੁਕਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})