कडसरावचें

कांय वर्ग आनी आमच्या जावास्क्रिप्ट प्लगइनांनी तुमच्या प्रकल्पांतल्यान सामुग्रीची दृश्यताय टॉगल करात.

उदारण

वर्ग बदला वरवीं दुसरो घटक दाखोवपाक आनी लिपोवपाक सकयल दिल्ल्या बटणां क्लिक करात:

.collapseसामुग्री लिपयता
.collapsingसंक्रमणाच्या वेळार लागू करतात
.collapse.showआशय दाखयता

तुमी गुणधर्म आशिल्ली दुवो वापरूं येता href, वा गुणधर्म आशिल्लें बटण वापरूं येता data-target. दोनूय प्रकरणांत, द data-toggle="collapse"हें गरजेचें आसा.

href कडेन लिंक

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

एका परस चड लक्ष्यां

A <button>वा ताच्या वा गुणधर्मांत <a>JQuery निवडकान संदर्भ दिवन जायते घटक दाखोवंक आनी लिपोवंक शकता . एका परस चड वा एक घटक दाखोवंक आनी लिपोवंक शकतात जर ते दरेकले ताचो संदर्भ तांच्या वा गुणधर्मान दितातhrefdata-target<button><a>hrefdata-target

पयलो घटक टॉगल करचो

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

अकॉर्डियन उदाहरण

कार्ड घटक वापरून , तुमी अकॉर्डियन तयार करपाक मुलभूत संकुचीत वर्तन वाडोवंक शकतात.

Anim pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड. 3 वाग चंद्र officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच. खाद्य ट्रक क्विनोआ nesciunt laborum eiusmod. ब्रंच 3 वाग चंद्र टेम्पोर, sunt aliqua ताचेर एक सुकणें घालें स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch इ. निहिल अनिम केफीयेह हेल्वेटिका, क्राफ्ट बियर लाबर वेस अँडरसन cred nesciunt sapiente ea proident. जाहिरात वेगन एक्सेप्टर कसाई उप लोमो. लेगिंग्स occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चे डेनिम सौंदर्य सिंथ nesciunt तुमी घडये तांचे विशीं आयकूं नात accusamus labore टिकावू व्हीएचएस.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

सुलभताय

aria-expandedनियंत्रण घटकांत जोडपाची खात्री करात . हें गुणधर्म नियंत्रणाक बांदिल्ल्या संकुचीत घटकाची सद्याची स्थिती स्क्रीन रीडर आनी तत्सम सहाय्यक तंत्रज्ञानाक स्पश्टपणान सांगता. संकुचीत करपाक येवपी घटक पूर्वनिर्धारीतपणान बंद आसल्यार, नियंत्रण घटकाचेर आशिल्ल्या गुणधर्माचें मोल आसपाक जाय aria-expanded="false". showजर तुमी वर्ग वापरून संकुचीत करपाक येवपी घटक पूर्वनिर्धारीतपणान उक्तो करपाक सेट केला जाल्यार, aria-expanded="true"ताचे बदला नियंत्रणाचेर सेट करात. प्लगइन आपसूकच हें गुणधर्म नियंत्रणाचेर टॉगल करतलें तें संकुचीत करपाक येवपी घटक उगडला वा बंद केला काय ना हाचेर आदारीत (जावास्क्रिप्ट वरवीं, वा वापरप्यान त्याच कोलाप्सबायल घटकाकय बांदिल्लो दुसरो नियंत्रण घटक ट्रिगर केल्ल्यान). नियंत्रण घटकाचो HTML घटक बटण न्हय जाल्यार (देखीक, एक <a>वा <div>), गुणधर्मrole="button"घटकाक जोडपाक जाय.

तुमचो नियंत्रण घटक एकूच संकुचीत करपाक येवपी घटकाक लक्ष्य करता जाल्यार – म्हळ्यार गुणधर्म निवडकाक data-targetनिर्देशीत करता – तुमी नियंत्रण घटकाक गुणधर्म जोडपाक जाय, जातूंत संकुचीत करपाक येवपी घटकाचो आसता. आधुनीक स्क्रीन रीडर आनी तत्सम सहाय्यक तंत्रज्ञान वापरप्यांक थेट संकुचीत करपाक येवपी घटकाचेरच वचपाक अतिरिक्त शॉर्टकट दिवपाक ह्या गुणधर्माचो वापर करतात.idaria-controlsid

लक्षांत दवरात की Bootstrap ची सद्याची कार्यान्वयन WAI-ARIA Authoring Practices 1.1 accordion नमुन्यांत वर्णीत केल्ल्या वेगवेगळ्या कीबोर्ड परस्पर क्रियांक आस्पावना - तुमकां स्वता सानुकूल JavaScript कडेन हे समाविष्ट करचे पडटले.

वापर

कोसळप प्लगइन जड उखलप हाताळपाक कांय वर्गांचो वापर करता:

.collapseसामुग्री लिपयता
.collapse.showआशय दाखयता
.collapsingसंक्रमण सुरू जातकच जोडटात, आनी सोंपतकच काडून उडयतात

हे वर्ग _transitions.scss.

डेटा गुणधर्मां वरवीं

फकत एका वा चड संकुचीत घटकांचें नियंत्रण आपोआप नेमपाक घटकाक data-toggle="collapse"आनी a जोडचें . data-targetगुणधर्म data-targetसंकुचीत लागू करपाक CSS निवडक स्वीकारता. collapseसंकुचीत करपाक येवपी घटकांत वर्ग जोडपाची खात्री करात . तुमकां तो पूर्वनिर्धारीत उगडपाक जाय जाल्यार, अतिरिक्त वर्ग जोडात show.

संकुचीत करपाक येवपी क्षेत्रांत अकॉर्डियन-सारकें गट वेवस्थापन जोडपाक, डेटा गुणधर्म जोडात data-parent="#selector". हें कृतींत पळोवपाक डेमो पळयात.

जावास्क्रिप्ट वरवीं

हाताळणी करून सक्षम करात:

$('.collapse').collapse()

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-parent="".

नांव	प्रकार	डिफॉल्ट	वर्णन
पालक	निवडक \| jQuery वस्तू \| DOM घटक	फट	जर पालक पुरवण केला जाल्यार, मागीर ही संकुचीत करपाक येवपी वस्त दाखयल्यार निर्दिश्ट पालक खाला आशिल्ले सगळे संकुचीत घटक बंद जातले. (पारंपारीक अकॉर्डियन वर्तना सारकें - हें `card`वर्गाचेर आदारून आसता). लक्ष्य संकुचीत क्षेत्राचेर गुणधर्म सेट करचें पडटा.
टॉगल करप	बूलियन हें नांव	खरें	आवाहनाचेर संकुचीत करपाक येवपी घटक टॉगल करता

पद्दती

अतुल्यकालिक पद्दती आनी संक्रमण

सगळ्यो एपीआय पद्दती अतुल्यकालिक आसतात आनी संक्रमण सुरू करतात . संक्रमण सुरू जातकच पूण सोंपचे पयलीं ते फोन करप्या कडेन परततात . ते भायर, संक्रमण घटकाचेर एक पद्दत कॉल दुर्लक्षीत जातलें .

चड म्हायती खातीर आमचें JavaScript दस्तावेज पळयात.

`.collapse(options)`

तुमची सामुग्री संकुचीत करपाक येवपी घटक म्हणून सक्रिय करता. एक पर्यायी पर्याय स्वीकारता object.

$('#myCollapsible').collapse({
  toggle: false
})

`.collapse('toggle')`

दाखोवपाक वा लिपोवन दवरपाक संकुचीत करपाक येवपी घटक टॉगल करता. संकुचीत करपाक येवपी घटक प्रत्यक्षांत दाखोवचे पयलीं वा लिपोवचे पयलीं (म्हळ्यार वा घडणूक घडचे पयलीं) कॉलराक परतता .shown.bs.collapsehidden.bs.collapse

`.collapse('show')`

संकुचीत करपाक येवपी घटक दाखयता. संकुचीत करपाक येवपी घटक प्रत्यक्षांत दाखोवचे पयलीं (म्हळ्यार shown.bs.collapseघडणूक घडचे पयलीं) कॉलराक परतता.

`.collapse('hide')`

संकुचीत करपाक येवपी घटक लिपयता. संकुचीत करपाक येवपी घटक प्रत्यक्षांत लिपचे पयलीं (म्हळ्यार hidden.bs.collapseघडणूक घडचे पयलीं) कॉलराक परतता.

`.collapse('dispose')`

एका घटकाचो कोसळप नश्ट करता.

घडणुको

बूटस्ट्रॅपाचो कोसळपाचो वर्ग कोळसो कार्यक्षमतेक हुक करपाखातीर कांय घडणुको उक्ती करता.

इव्हेंट प्रकार	वर्णन
शो.बीएस.कोलाप्स करप	`show`दृष्टांत पद्दत कॉल करतना ही घडणूक रोखडीच फायर जाता .
दाखयलां.bs.collapse	वापरप्याक कोसळपी घटक दिसपाक लायल्यार ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले).
लिपोवप.bs.collapse करप	`hide`पद्दत आपयल्या उपरांत ही घडणूक रोखडीच फायर करतात .
लिपलां.bs.collapse करप	वापरप्या कडल्यान संकुचीत घटक लिपला तेन्ना ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले).

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

कडसरावचें

उदारण

एका परस चड लक्ष्यां

अकॉर्डियन उदाहरण

संकुचीत करपाक येवपी गट आयटम # 1

संकुचीत करपाक येवपी गट आयटम # 2

संकुचीत करपाक येवपी गट आयटम # 3