JS Collapse
Collapse CSS klasslari
Yig‘iladigan bloklar haqidagi darslik uchun Bootstrap collapse darsligimizni o‘qing.
| Klass | Tavsif | Misol |
|---|---|---|
.collapse |
Kontentni yashiradi | Sinab ko‘ring |
.collapse show |
Yig‘iladigan kontentni standart holatda ko‘rsatadi | Sinab ko‘ring |
.collapsing |
O‘tish (transition) boshlanganda qo‘shiladi va tugaganda olib tashlanadi | Sinab ko‘ring |
data-* atributlari orqali
Yig‘iladigan element ustidan boshqaruvni avtomatik biriktirish uchun elementga shunchaki data-toggle="collapse" va data-target ni qo‘shing. data-target atributi collapse qo‘llaniladigan CSS selektorni qabul qiladi. Yig‘iladigan elementga collapse klassini qo‘shishni unutmang. Agar u standart holatda ochiq bo‘lishini istasangiz, qo‘shimcha "show" klassini qo‘shing.
Misol
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
O‘zingiz sinab ko‘ring »
Maslahat: Yig‘iladigan boshqaruv elementiga akkordeonga o‘xshash guruh boshqaruvini qo‘shish uchun data-parent="#selector" data atributini qo‘shing.
JavaScript orqali
Qo‘lda faollashtirish uchun:
$('.collapse').collapse()
Collapse parametrlari (options)
Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan, data-parent="".
| Nomi | Turi | Standart | Tavsif | Sinab ko‘ring |
|---|---|---|---|---|
| parent | selector | false | Ushbu yig‘iladigan element ko‘rsatilganda, ko‘rsatilgan ota element ostidagi barcha yig‘iladigan elementlar yopiladi (an’anaviy akkordeon xatti-harakatiga o‘xshash) | Sinab ko‘ring |
| toggle | boolean | true | Chaqirilganda yig‘iladigan elementni ochadi/yopadi (toggle) | Sinab ko‘ring |
Collapse metodlari
Quyidagi jadvalda barcha mavjud collapse metodlari keltirilgan.
| Metod | Tavsif | Sinab ko‘ring |
|---|---|---|
| .collapse(options) | Yig‘iladigan elementni parametr bilan faollashtiradi. Yaroqli qiymatlar uchun yuqoridagi parametrlarga qarang | |
| .collapse("toggle") | Yig‘iladigan elementni ochadi/yopadi (toggle) | Sinab ko‘ring |
| .collapse("show") | Yig‘iladigan elementni ko‘rsatadi | Sinab ko‘ring |
| .collapse("hide") | Yig‘iladigan elementni yashiradi | Sinab ko‘ring |
| .collapse("dispose") | Yig‘iladigan elementni yo‘q qiladi |
Collapse hodisalari (events)
Quyidagi jadvalda barcha mavjud collapse hodisalari keltirilgan.
| Hodisa | Tavsif | Sinab ko‘ring |
|---|---|---|
| show.bs.collapse | Yig‘iladigan element ko‘rsatilish arafasida yuz beradi | Sinab ko‘ring |
| shown.bs.collapse | Yig‘iladigan element to‘liq ko‘rsatilganda yuz beradi (CSS o‘tishlari tugagandan keyin) | Sinab ko‘ring |
| hide.bs.collapse | Yig‘iladigan element yashirilish arafasida yuz beradi | Sinab ko‘ring |
| hidden.bs.collapse | Yig‘iladigan element to‘liq yashirilganda yuz beradi (CSS o‘tishlari tugagandan keyin) | Sinab ko‘ring |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!