मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
in English

खसि पड़नाइ

अपनऽ प्रोजेक्ट भर म॑ सामग्री केरऽ दृश्यता क॑ कुछ वर्ग आरू हमरऽ जावास्क्रिप्ट प्लगइन के साथ टॉगल करलऽ जाय ।

कोना काज करैत अछि

संकुचित जावास्क्रिप्ट प्लगइन कें उपयोग सामग्री कें दिखावा आ छिपाबै कें लेल करल जाय छै. बटन या एंकर कें उपयोग ट्रिगर कें रूप मे कैल जायत छै जे विशिष्ट तत्वक कें लेल मैप कैल जायत छै जेकरा अहां टॉगल करय छी. कोनो तत्व केँ संकुचित करब heightओकर वर्तमान मान सँ 0. ई देखैत जे CSS एनीमेशन के कोना संभालैत अछि, अहाँ कोनो तत्व paddingपर उपयोग नहि क सकैत छी । .collapseएकर बजाय, वर्ग क' एकटा स्वतंत्र रैपिंग तत्व क रूप मे उपयोग करू.

एहि घटक क एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर करैत अछि । हमर सुलभता दस्तावेजीकरणक कम गति अनुभाग देखू .

उदाहरण

वर्ग परिवर्तन के माध्यम स॑ दोसर तत्व क॑ दिखाबै आरू छिपाबै लेली नीचें देलऽ गेलऽ बटनऽ प॑ क्लिक करलऽ जाय छै:

  • .collapseसामग्री नुकाबैत अछि
  • .collapsingसंक्रमणक कें दौरान लागू कैल जायत छै
  • .collapse.showसामग्री देखाबैत अछि

data-bs-targetसामान्यतया, हम विशेषता वाला बटन के उपयोग करय के सलाह दैत छी . जखन कि शब्दार्थ दृष्टिकोण स अनुशंसित नहि अछि, अहाँ hrefविशेषता (आ एकटा 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>

एकाधिक लक्ष्य

<button>या <a>अपनऽ hrefया data-bs-targetविशेषता म॑ एक चयनकर्ता स॑ संदर्भित करी क॑ अनेक तत्वऽ क॑ दिखाबै आरू छिपा सकै छै । बहु <button>या <a>कोनों तत्व कें देखा सकय छै आ नुका सकय छै अगर ओ प्रत्येक ओकरा अपन hrefया data-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-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विशेषता एकटा CSS चयनकर्ता कें स्वीकार करयत छै जइ data-bs-targetपर संकुचन लागू करयत छै. 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="".

नाम प्रकार चुकनाइ वर्णन
parent चयनकर्ता | jQuery वस्तु | डोम तत्व false यदि माता-पिता प्रदान कैल गेल छै, तखन निर्दिष्ट अभिभावक कें अंतर्गत सबटा संकुचित तत्व बंद भ जेतय जखन इ संकुचित आइटम देखायल जैतय. (पारंपरिक अकॉर्डियन व्यवहार के समान - ई cardवर्ग पर निर्भर करैत अछि)। विशेषता कें लक्ष्य संकुचित क्षेत्र पर सेट करय कें होयत छै.
toggle बूलियन true आह्वान पर संकुचन योग्य तत्व टॉगल करैत अछि

विधियाँ

अतुल्यकालिक विधि एवं संक्रमण

सब एपीआई विधि एसिंक्रोनस अछि आ एकटा संक्रमण शुरू करैत अछि . संक्रमण शुरू होइते मुदा समाप्त होए सं पहिने फोन करय वाला के पास वापस आबि जाइत छथिन्ह . एकर अलावा, एकटा संक्रमण घटक पर एकटा विधि कॉल कें अनदेखी कैल जेतय .

अधिक जानकारी के लेल हमर जावास्क्रिप्ट दस्तावेज देखू .

एकटा संकुचित तत्व के रूप मे अपन सामग्री के सक्रिय करैत अछि. एकटा वैकल्पिक विकल्प स्वीकार करैत अछि 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 ई घटना तखन फायर कएल जाइत अछि जखन कोनो संकुचन तत्व उपयोगकर्ताक लेल दृश्यमान बनाओल गेल अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत) ।
hide.bs.collapse hideविधि बजाओल गेलाक बाद ई घटना तुरंत फायर कएल जाइत अछि ।
hidden.bs.collapse ई घटना तखन फायर कएल जाइत अछि जखन कोनो संकुचन तत्व उपयोगकर्ता सँ नुका देल गेल अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत) ।
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})