खसि पड़नाइ

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

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

उदाहरण

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

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

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

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

सस्स

चर

$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विशेषता एकटा CSS चयनकर्ता कें स्वीकार करयत छै जइ 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 ” सं “ kabab -case ” मे बदलनाय सुनिश्चित करूं . जेना, के 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...
})