ਸਮੇਟਣਾ
ਕੁਝ ਕਲਾਸਾਂ ਅਤੇ ਸਾਡੇ JavaScript ਪਲੱਗਇਨਾਂ ਨਾਲ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਮੱਗਰੀ ਦੀ ਦਿੱਖ ਨੂੰ ਟੌਗਲ ਕਰੋ।
ਕਿਦਾ ਚਲਦਾ
ਸਮੇਟਣਾ JavaScript ਪਲੱਗਇਨ ਸਮੱਗਰੀ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਬਟਨਾਂ ਜਾਂ ਐਂਕਰਾਂ ਨੂੰ ਟਰਿਗਰਾਂ ਵਜੋਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਦੁਆਰਾ ਟੌਗਲ ਕਰਦੇ ਹੋਏ ਖਾਸ ਤੱਤਾਂ ਨਾਲ ਮੈਪ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਕਿਸੇ ਤੱਤ ਨੂੰ ਸਮੇਟਣ ਨਾਲ height
ਇਸ ਦੇ ਮੌਜੂਦਾ ਮੁੱਲ ਤੋਂ 0
. padding
CSS ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਕਿਵੇਂ ਹੈਂਡਲ ਕਰਦਾ ਹੈ, ਇਸ ਨੂੰ ਦੇਖਦੇ ਹੋਏ, ਤੁਸੀਂ ਕਿਸੇ .collapse
ਤੱਤ 'ਤੇ ਨਹੀਂ ਵਰਤ ਸਕਦੇ । ਇਸਦੀ ਬਜਾਏ, ਕਲਾਸ ਨੂੰ ਇੱਕ ਸੁਤੰਤਰ ਰੈਪਿੰਗ ਐਲੀਮੈਂਟ ਵਜੋਂ ਵਰਤੋ।
prefers-reduced-motion
ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਪਹੁੰਚਯੋਗਤਾ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਘਟਾਏ ਗਏ ਮੋਸ਼ਨ ਭਾਗ ਨੂੰ ਦੇਖੋ
।
ਉਦਾਹਰਨ
ਕਲਾਸ ਤਬਦੀਲੀਆਂ ਰਾਹੀਂ ਕਿਸੇ ਹੋਰ ਤੱਤ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰੋ:
.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>
ਵਿੱਚ ਇੱਕ ਚੋਣਕਾਰ ਨਾਲ ਉਹਨਾਂ ਦਾ ਹਵਾਲਾ ਦੇ ਕੇ ਕਈ ਤੱਤਾਂ ਨੂੰ ਦਿਖਾ ਅਤੇ ਲੁਕਾ ਸਕਦਾ ਹੈ। ਮਲਟੀਪਲ ਜਾਂ ਇੱਕ ਐਲੀਮੈਂਟ ਨੂੰ ਦਿਖਾ ਅਤੇ ਲੁਕਾ ਸਕਦੇ ਹਨ ਜੇਕਰ ਉਹ ਹਰ ਇੱਕ ਆਪਣੇ ਜਾਂ ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਇਸਦਾ ਹਵਾਲਾ ਦਿੰਦੇ ਹਨhref
data-bs-target
<button>
<a>
href
data-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 ਐਲੀਮੈਂਟ ਇੱਕ ਬਟਨ ਨਹੀਂ ਹੈ (ਉਦਾਹਰਨ ਲਈ, ਇੱਕ <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 ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।
ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦੇ ਰੂਪ ਵਿੱਚ ਕਿਰਿਆਸ਼ੀਲ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ 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...
})