बूटस्ट्रैप 4 जेएस संक्षिप्त करें
सीएसएस कक्षाएं संक्षिप्त करें
Collapsibles के बारे में एक ट्यूटोरियल के लिए, हमारा बूटस्ट्रैप संक्षिप्त ट्यूटोरियल पढ़ें ।
| Class | Description | Example |
|---|---|---|
.collapse |
Hides the content | |
.collapse show |
Shows the collapsible content by default | |
.collapsing |
Added when the transition starts, and removed when it finishes |
डेटा के माध्यम से-* विशेषताएँ
एक संक्षिप्त करने योग्य तत्व का नियंत्रण स्वचालित रूप से असाइन करने के लिए बस जोड़ें data-toggle="collapse"और एक data-targetतत्व में। डेटा-लक्षित विशेषता संक्षिप्त को लागू करने के लिए एक सीएसएस चयनकर्ता को स्वीकार करती है। बंधनेवाला तत्व में वर्ग पतन जोड़ना सुनिश्चित करें। यदि आप इसे डिफ़ॉल्ट रूप से खोलना चाहते हैं, तो अतिरिक्त वर्ग "शो" जोड़ें।
उदाहरण
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
युक्ति: एक संक्षिप्त नियंत्रण में अकॉर्डियन जैसा समूह प्रबंधन जोड़ने के लिए, डेटा विशेषता डेटा-पैरेंट = "# चयनकर्ता" जोड़ें।
जावास्क्रिप्ट के माध्यम से
इसके साथ मैन्युअल रूप से सक्षम करें:
$('.collapse').collapse()
विकल्प संक्षिप्त करें
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को डेटा में जोड़ें- जैसा कि डेटा-पैरेंट = "" में है।
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior) | |
| toggle | boolean | true | Toggles the collapsible element on invocation |
संक्षिप्त तरीके
निम्न तालिका सभी उपलब्ध पतन विधियों को सूचीबद्ध करती है।
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | |
| .collapse("show") | Shows the collapsible element | |
| .collapse("hide") | Hides the collapsible element | |
| .collapse("dispose") | Destroys the collapsible element |
घटनाएँ संक्षिप्त करें
निम्न तालिका सभी उपलब्ध संक्षिप्त घटनाओं को सूचीबद्ध करती है।
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) |