गिर जाना

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

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

क्षैतिज

पतन प्लगइन क्षैतिज ढहने का भी समर्थन करता है। इसके बजाय .collapse-horizontalसंक्रमण करने के लिए संशोधक वर्ग जोड़ें और तत्काल बाल तत्व पर सेट करें। बेझिझक अपना स्वयं का कस्टम Sass लिखें, इनलाइन शैलियों का उपयोग करें, या हमारी चौड़ाई उपयोगिताओं का उपयोग करें ।widthheightwidth

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

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

ए <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 तत्व एक बटन नहीं है (जैसे, a <a>या <div>), तो विशेषताrole="button"तत्व में जोड़ा जाना चाहिए।

यदि आपका नियंत्रण तत्व एक एकल ढहने योग्य तत्व को लक्षित कर रहा है - अर्थात data-bs-targetविशेषता एक चयनकर्ता की ओर इशारा कर रही है - तो आपको नियंत्रण तत्व idमें विशेषता जोड़नी चाहिए , जिसमें ढहने योग्य तत्व शामिल है। आधुनिक स्क्रीन रीडर और इसी तरह की सहायक प्रौद्योगिकियां इस विशेषता का उपयोग उपयोगकर्ताओं को सीधे संक्षिप्त होने योग्य तत्व पर नेविगेट करने के लिए अतिरिक्त शॉर्टकट प्रदान करने के लिए करती हैं।aria-controlsid

ध्यान दें कि बूटस्ट्रैप का वर्तमान कार्यान्वयन ARIA ऑथरिंग प्रैक्टिस गाइड अकॉर्डियन पैटर्न में वर्णित विभिन्न वैकल्पिक कीबोर्ड इंटरैक्शन को कवर नहीं करता है - आपको कस्टम जावास्क्रिप्ट के साथ इन्हें स्वयं शामिल करना होगा।

सास

चर

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

कक्षाओं

संक्षिप्त संक्रमण वर्गों में पाया जा सकता है scss/_transitions.scssक्योंकि ये कई घटकों (पतन और अकॉर्डियन) में साझा किए जाते हैं।

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

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

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

प्रयोग

भारी भारोत्तोलन को संभालने के लिए पतन प्लगइन कुछ वर्गों का उपयोग करता है:

• .collapseसामग्री छुपाता है
• .collapse.showसामग्री दिखाता है
• .collapsingसंक्रमण शुरू होने पर जोड़ा जाता है, और समाप्त होने पर हटा दिया जाता है

इन वर्गों में पाया जा सकता है _transitions.scss।

डेटा विशेषताओं के माध्यम से

एक या अधिक संक्षिप्त होने वाले तत्वों का नियंत्रण स्वचालित रूप से असाइन करने के लिए बस जोड़ें data-bs-toggle="collapse"और data-bs-targetतत्व में a जोड़ें। data-bs-targetएट्रिब्यूट सीएसएस चयनकर्ता को पतन लागू करने के लिए स्वीकार करता है । collapseकक्षा को संक्षिप्त करने योग्य तत्व में जोड़ना सुनिश्चित करें । यदि आप इसे डिफ़ॉल्ट रूप से खोलना चाहते हैं, तो अतिरिक्त वर्ग जोड़ें show।

एक संक्षिप्त क्षेत्र में अकॉर्डियन जैसा समूह प्रबंधन जोड़ने के लिए, डेटा विशेषता जोड़ें data-bs-parent="#selector"। अधिक जानकारी के लिए अकॉर्डियन पृष्ठ देखें।

जावास्क्रिप्ट के माध्यम से

इसके साथ मैन्युअल रूप से सक्षम करें:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

विकल्प

चूंकि विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं, आप विकल्प नाम को में जोड़ सकते हैं data-bs-, जैसा कि में है data-bs-animation="{value}"। डेटा विशेषताओं के माध्यम से विकल्पों को पास करते समय केस प्रकार के विकल्प नाम को " CamelCase " से " कबाब-केस " में बदलना सुनिश्चित करें । उदाहरण के लिए, data-bs-custom-class="beautifier"के बजाय उपयोग करें data-bs-customClass="beautifier"।

बूटस्ट्रैप 5.2.0 के अनुसार, सभी घटक एक प्रयोगात्मक आरक्षित डेटा विशेषता data-bs-configका समर्थन करते हैं जो JSON स्ट्रिंग के रूप में सरल घटक कॉन्फ़िगरेशन को रख सकता है। जब किसी तत्व में data-bs-config='{"delay":0, "title":123}'और data-bs-title="456"विशेषताएँ होती हैं, तो अंतिम titleमान होगा 456और अलग डेटा विशेषताएँ पर दिए गए मानों को ओवरराइड कर देंगी data-bs-config। इसके अलावा, मौजूदा डेटा विशेषताएँ JSON मान जैसे data-bs-delay='{"show":0,"hide":150}'.

तरीकों

आपकी सामग्री को एक संक्षिप्त करने योग्य तत्व के रूप में सक्रिय करता है। एक वैकल्पिक विकल्प स्वीकार करता है object।

आप कंस्ट्रक्टर के साथ एक संक्षिप्त उदाहरण बना सकते हैं, उदाहरण के लिए:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

आयोजन

बूटस्ट्रैप का पतन वर्ग पतन की कार्यक्षमता में शामिल होने के लिए कुछ घटनाओं को उजागर करता है।

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})