ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
in English

يىمىرىلىش

بىر قانچە سىنىپ ۋە JavaScript قىستۇرمىلىرىمىز ئارقىلىق تۈرنىڭ مەزمۇنىنىڭ كۆرۈنۈشچانلىقىنى توغرىلاڭ.

قانداق ئىشلەيدۇ

يىمىرىلگەن JavaScript قىستۇرمىسى مەزمۇننى كۆرسىتىش ۋە يوشۇرۇش ئۈچۈن ئىشلىتىلىدۇ. كۇنۇپكا ياكى لەڭگەر سىز ئالماشتۇرغان ئالاھىدە ئېلېمېنتلارغا سىزىلغان قوزغاتقۇچ سۈپىتىدە ئىشلىتىلىدۇ. ئېلېمېنتنى يىمىرىۋېتىش heightئۇنىڭ ھازىرقى قىممىتىدىن جانلىنىدۇ 0. CSS نىڭ كارتوننى قانداق بىر تەرەپ قىلىدىغانلىقىنى نەزەردە تۇتقاندا ، paddingئېلېمېنتنى .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>

توغرىسىغا

يىمىرىلىش قىستۇرمىسى يەنە توغرىسىغا يىمىرىلىشىنى قوللايدۇ. .collapse-horizontalئالماشتۇرغۇچ سىنىپىنى قوشۇپ widthئۇنىڭ ئورنىغا ئۆتۈڭ ھەمدە بىۋاسىتە بالا ئېلېمېنتىغا heightتەڭشەڭ . widthئۆزىڭىزنىڭ خاس Sass نى يېزىڭ ، ئىچكى ئۇسلۇبلارنى ئىشلىتىڭ ياكى كەڭلىكىمىزنى ئىشلىتىڭ .

شۇنىڭغا دىققەت قىلىڭكى ، تۆۋەندىكى مىسالدا min-heightھۆججەتلىرىمىزدە ھەددىدىن زىيادە بوياشتىن ساقلىنىش ئۈچۈن بىر يۈرۈش بولسىمۇ ، بۇ ئېنىق تەلەپ قىلىنمايدۇ. پەقەت widthبالا ئېلېمېنتى تەلەپ قىلىنىدۇ.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<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>

كۆپ نىشان

A <button>ياكى بىر قانچە ئېلېمېنتنى ئۇنىڭ ياكى خاسلىقىدىكى <a>تاللىغۇچ بىلەن پايدىلىنىش ئارقىلىق كۆرسىتىپ ۋە يوشۇرالايدۇ . كۆپ ياكى بىر ئېلېمېنتنى ھەر بىرسى ئۆزىنىڭ ياكى خاسلىقى بىلەن كۆرسەتسە ياكى كۆرسىتىپ بېرەلەيدۇ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"، ئۇنىڭ ئورنىغا كونترول قىلىڭ. قىستۇرما قاتلىنىدىغان ئېلېمېنتنىڭ ئېچىلغان ياكى ئېچىلمىغانلىقىغا ئاساسەن (JavaScript ئارقىلىق ياكى ئىشلەتكۈچى ئوخشاش بىر قاتلىنىدىغان ئېلېمېنتقا باغلانغان باشقا كونترول ئېلېمېنتىنى قوزغىغانلىقى ئۈچۈن) بۇ خاسلىقنى كونترولدا ئاپتوماتىك ئالماشتۇرىدۇ. ئەگەر كونترول ئېلېمېنتىنىڭ HTML ئېلېمېنتى كۇنۇپكا بولمىسا (مەسىلەن ، <a>ياكى ياكى <div>) ، خاسلىقrole="button"ئېلېمېنتقا قوشۇلۇشى كېرەك.

ئەگەر كونترول ئېلېمېنتىڭىز بىرلا قاتلىنىدىغان ئېلېمېنتنى نىشانلىغان بولسا - يەنى data-bs-targetخاسلىق تاللىغۇچنى كۆرسەتسە - سىز خاسلىقنى كونترول ئېلېمېنتىغا idقوشۇشىڭىز كېرەك ، ئۇنىڭدا يىمىرىلىدىغان ئېلېمېنت بار. زامانىۋى ئېكران ئوقۇرمەنلىرى ۋە شۇنىڭغا ئوخشاش ياردەمچى تېخنىكىلار بۇ خاسلىقتىن پايدىلىنىپ ، ئىشلەتكۈچىلەرنى تېزلەتكىلى بولىدىغان ئېلېمېنتنىڭ ئۆزىگە بىۋاسىتە يېتەكلەش ئۈچۈن قوشۇمچە تېزلەتمىلەر بىلەن تەمىنلەيدۇ.aria-controlsid

شۇنىڭغا دىققەت قىلىڭكى ، Bootstrap نىڭ نۆۋەتتىكى يولغا قويۇلۇشى WAI-ARIA ئاپتورلۇق ئەمەلىيىتى 1.1 ئاككوردىيون ئەندىزىسىدە تەسۋىرلەنگەن ھەرخىل ئىختىيارى كۇنۇپكا تاختىسىنى ئۆز ئىچىگە ئالمايدۇ - بۇلارنى ئۆزىڭىز JavaScript بىلەن ئۆز ئىچىگە ئېلىشىڭىز كېرەك.

Sass

ئۆزگەرگۈچى مىقدار

$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قانچە قاتلىنىدىغان ئېلېمېنتنى كونترول قىلىشنى ئاپتوماتىك تەقسىملەڭ. خاسلىق data-bs-targetيىمىرىلىشنى قوللىنىش ئۈچۈن CSS تاللىغۇچنى قوبۇل قىلىدۇ. collapseدەرسنى قاتلىنىدىغان ئېلېمېنتقا قوشۇشقا كاپالەتلىك قىلىڭ . ئەگەر سۈكۈتتىكى ھالەتتە ئېچىشنى ئويلىسىڭىز ، قوشۇمچە دەرسنى قوشۇڭ show.

To add accordion-like group management to a collapsible area, add the data attribute data-bs-parent="#selector". Refer to the accordion page for more information.

Via JavaScript

Enable manually with:

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-parent="".

Name Type Default Description
parent selector | jQuery object | DOM element false If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area.
toggle boolean true Toggles the collapsible element on invocation

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

Activates your content as a collapsible element. Accepts an optional options object.

You can create a collapse instance with the constructor, for example:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Method Description
toggle Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).
show Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (e.g., before the shown.bs.collapse event occurs).
hide Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (e.g., before the hidden.bs.collapse event occurs).
dispose Destroys an element's collapse. (Removes stored data on the DOM element)
getInstance Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: bootstrap.Collapse.getInstance(element)
getOrCreateInstance Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: bootstrap.Collapse.getOrCreateInstance(element)

Events

Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.

Event type Description
show.bs.collapse This event fires immediately when the show instance method is called.
shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.collapse This event is fired immediately when the hide method has been called.
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})