मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
in English

संश्यान

कतिपयैः वर्गैः अस्माकं जावास्क्रिप्ट् प्लगिन्स् इत्यनेन च स्वस्य परियोजनायां सामग्रीयाः दृश्यतां टॉगल कुर्वन्तु ।

कथं कार्यं करोति

सामग्रीं दर्शयितुं गोपनार्थं च collapse JavaScript प्लगिन् उपयुज्यते । बटन्स् अथवा एङ्कर्स् इत्यस्य उपयोगः ट्रिगर् इत्यस्य रूपेण भवति ये भवता टॉग्ल् कृत्वा विशिष्टतत्त्वेषु मैप् कृताः भवन्ति । तत्त्वं संकुचितं कृत्वा heightतस्य वर्तमानमूल्यात् 0. paddingCSS एनिमेशनं कथं सम्पादयति इति दृष्ट्वा, भवान् कस्मिंश्चित् .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>

अनेक लक्ष्य

A <button>or इत्यस्य or attribute <a>इत्यस्मिन् selector इत्यनेन सह सन्दर्भयित्वा बहुधा तत्त्वानि दर्शयितुं गोपयितुं च शक्नोति । बहु वा एकं तत्त्वं दर्शयितुं गोपयितुं च शक्नुवन्ति यदि ते प्रत्येकं स्वस्य वा विशेषतायाः सह तस्य सन्दर्भं ददति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 तत्त्वं बटनं नास्ति (उदा., an <a>or <div>), तर्हि विशेषताrole="button"तत्त्वं योजयेत् ।

यदि भवतां नियन्त्रणतत्त्वं एकं संकुचनीयं तत्त्वं लक्ष्यं करोति – अर्थात् data-bs-targetविशेषता चयनकर्तारं दर्शयति – तर्हि भवान् नियन्त्रणतत्त्वे विशेषतां idयोजयितव्यं , यत्र संकुचनीयतत्त्वस्य the भवति आधुनिकस्क्रीन् रीडर् तथा तत्सदृशाः सहायकप्रौद्योगिकयः अस्य विशेषतायाः उपयोगं कुर्वन्ति यत् उपयोक्तृभ्यः संकुचनीयतत्त्वे एव प्रत्यक्षतया गन्तुं अतिरिक्तशॉर्टकट् प्रदातुं शक्नुवन्तिaria-controlsid

ध्यानं कुर्वन्तु यत् Bootstrap इत्यस्य वर्तमानकार्यन्वयनं WAI-ARIA Authoring Practices 1.1 accordion pattern इत्यस्मिन् वर्णितानि विविधानि वैकल्पिकानि कीबोर्ड-अन्तर्क्रियाः न आच्छादयति - भवद्भिः एतानि स्वयमेव कस्टम् JavaScript इत्यनेन सह समाविष्टानि कर्तव्यानि भविष्यन्ति

सस्स

चर

$transition-collapse:         height .35s ease;

कक्षाः

Collapse transition classes इत्यत्र द्रष्टुं शक्यन्ते scss/_transitions.scssयतः एते बहुषु घटकेषु (collapse and accordion) साझाः भवन्ति ।

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

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

प्रयोगः

पतनप्लगिन् भारी उत्थापनं नियन्त्रयितुं कतिपयान् वर्गान् उपयुज्यते:

  • .collapseसामग्रीं गोपयति
  • .collapse.showसामग्रीं दर्शयति
  • .collapsingसंक्रमणस्य आरम्भे योजितः भवति, समाप्तौ च निष्कासितः भवति

एते वर्गाः _transitions.scss.

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

केवलं एकस्य वा अधिकस्य वा संकुचनीयस्य तत्त्वस्य नियन्त्रणं स्वयमेव नियुक्तुं तत्त्वे data-bs-toggle="collapse"and a योजयन्तु । विशेषणं संकुचनं प्रयोक्तुं CSS चयनकर्तारं स्वीकुर्वति data-bs-target। संकुचनीयतत्त्वे data-bs-targetवर्गं अवश्यं योजयन्तु । collapseयदि भवान् इदं पूर्वनिर्धारितरूपेण उद्घाटितुम् इच्छति तर्हि अतिरिक्तवर्गं योजयन्तु show.

संकुचनीयक्षेत्रे accordion-सदृशं समूहप्रबन्धनं योजयितुं, data attribute योजयन्तु data-bs-parent="#selector"। एतत् कार्ये द्रष्टुं डेमो पश्यन्तु।

जावास्क्रिप्ट् मार्गेण

सह मैन्युअल् रूपेण सक्षमं कुर्वन्तु:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-bs-योजयन्तु data-bs-parent=""

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
parent चयनकर्ता | jQuery वस्तु | DOM तत्वम् false यदि parent प्रदत्तं भवति, तर्हि निर्दिष्टस्य parent इत्यस्य अधः सर्वे संकुचनीयाः तत्त्वानि बन्दं भविष्यन्ति यदा एतत् संकुचनीयं द्रव्यं दर्शितं भवति । (पारम्परिक-अकॉर्डियन-व्यवहारस्य सदृशम् - एतत् वर्गाश्रितम् अस्ति card)। लक्ष्यसंकुचनीयक्षेत्रे विशेषतां सेट् कर्तव्यम् अस्ति ।
toggle बूलियन इति true आह्वानसमये संकुचनीयं तत्त्वं टॉगलं करोति

विधियाँ

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

सर्वे एपिआइ विधिः अतुल्यकालिकः भवति तथा च संक्रमणं आरभते | ते संक्रमणस्य आरम्भमात्रेण परन्तु तस्य समाप्तेः पूर्वं आह्वानकर्तुः समीपं आगच्छन्ति | तदतिरिक्तं, संक्रमणघटकस्य उपरि एकः विधि-आह्वानः अवहेलितः भविष्यति .

अधिकविवरणार्थं अस्माकं जावास्क्रिप्ट् दस्तावेजं पश्यन्तु .

भवतः सामग्रीं संकुचनीयतत्त्वरूपेण सक्रियं करोति । एकं वैकल्पिकं विकल्पं स्वीकुर्वति object.

भवन्तः कन्स्ट्रक्टर् इत्यनेन सह collapse instance रचयितुं शक्नुवन्ति, यथा :

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
प्रक्रिया वर्णनम्‌
toggle एकं संकुचनीयं तत्त्वं दर्शितं वा गुप्तं वा प्रति टॉगलं करोति । संकुचनीयतत्त्वस्य वास्तविकरूपेण दर्शितस्य वा गोपनस्य वा पूर्वं (अर्थात् shown.bs.collapseor hidden.bs.collapseघटनायाः भवितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।
show संकुचनीयं तत्त्वं दर्शयति । संकुचनीयतत्त्वस्य वास्तविकरूपेण दर्शितस्य पूर्वं (उदा., shown.bs.collapseघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।
hide संकुचनीयं तत्त्वं गोपयति । संकुचनीयतत्त्वस्य वास्तविकरूपेण गोपनात् पूर्वं (उदा., hidden.bs.collapseघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।
dispose कस्यचित् तत्त्वस्य पतनं नाशयति। (DOM तत्वे संगृहीतदत्तांशं निष्कासयति)
getInstance स्थिरविधिः या भवन्तं DOM तत्वेन सह सम्बद्धं collapse instance प्राप्तुं शक्नोति, भवान् एतस्य उपयोगं एतादृशं कर्तुं शक्नोति:bootstrap.Collapse.getInstance(element)
getOrCreateInstance स्थिरविधिः यः DOM-तत्त्वेन सह सम्बद्धं संकुचन-दृष्टान्तं प्रत्यागच्छति अथवा आरम्भं न कृतम् इति सन्दर्भे नूतनं रचयति । भवान् एतस्य उपयोगं एवं कर्तुं शक्नोति।bootstrap.Collapse.getOrCreateInstance(element)

घटनाः

Bootstrap इत्यस्य collapse वर्गः collapse कार्यक्षमतायाः हुक् करणाय कतिपयानि घटनानि उजागरयति ।

घटना प्रकार वर्णनम्‌
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...
})