मुख्य विषयवस्तु में जाएं डॉक्स नेविगेशन पर जाएं
in English

गिर जाना

कुछ कक्षाओं और हमारे जावास्क्रिप्ट प्लग इन के साथ अपने प्रोजेक्ट में सामग्री की दृश्यता को टॉगल करें।

यह काम किस प्रकार करता है

सामग्री को दिखाने और छिपाने के लिए कोलैप्स जावास्क्रिप्ट प्लगइन का उपयोग किया जाता है। बटन या एंकर का उपयोग ट्रिगर के रूप में किया जाता है जो आपके द्वारा टॉगल किए जाने वाले विशिष्ट तत्वों के लिए मैप किए जाते हैं। किसी तत्व को संक्षिप्त करने heightसे उसके वर्तमान मान से को चेतन हो जाएगा 0। यह देखते हुए कि CSS एनिमेशन को कैसे संभालता है, आप किसी तत्व paddingपर उपयोग नहीं कर सकते। .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>

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

<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 <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तत्व में a जोड़ें। 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 एक तत्व के पतन को नष्ट कर देता है। (डीओएम तत्व पर संग्रहीत डेटा हटा देता है)
getInstance स्टेटिक विधि जो आपको डीओएम तत्व से जुड़े पतन उदाहरण प्राप्त करने की अनुमति देती है, आप इसे इस तरह उपयोग कर सकते हैं:bootstrap.Collapse.getInstance(element)
getOrCreateInstance स्टेटिक विधि जो एक डोम तत्व से जुड़े एक पतन उदाहरण देता है या यदि इसे प्रारंभ नहीं किया गया था तो एक नया बनाएं। आप इसे इस तरह इस्तेमाल कर सकते हैं: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...
})