ಕುಗ್ಗಿಸು

ಕೆಲವು ತರಗತಿಗಳು ಮತ್ತು ನಮ್ಮ JavaScript ಪ್ಲಗಿನ್‌ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಯೋಜನೆಯಾದ್ಯಂತ ವಿಷಯದ ಗೋಚರತೆಯನ್ನು ಟಾಗಲ್ ಮಾಡಿ.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಕುಸಿತದ JavaScript ಪ್ಲಗಿನ್ ಅನ್ನು ವಿಷಯವನ್ನು ತೋರಿಸಲು ಮತ್ತು ಮರೆಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ. ನೀವು ಟಾಗಲ್ ಮಾಡುವ ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳಿಗೆ ಮ್ಯಾಪ್ ಮಾಡಲಾದ ಟ್ರಿಗ್ಗರ್‌ಗಳಾಗಿ ಬಟನ್‌ಗಳು ಅಥವಾ ಆಂಕರ್‌ಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಅಂಶವನ್ನು ಕುಗ್ಗಿಸುವುದು heightಅದರ ಪ್ರಸ್ತುತ ಮೌಲ್ಯದಿಂದ ಗೆ ಅನಿಮೇಟ್ ಮಾಡುತ್ತದೆ 0. CSS ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿದರೆ, ನೀವು paddingಒಂದು .collapseಅಂಶದಲ್ಲಿ ಬಳಸಲಾಗುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ವರ್ಗವನ್ನು ಸ್ವತಂತ್ರ ಸುತ್ತುವ ಅಂಶವಾಗಿ ಬಳಸಿ.

ಉದಾಹರಣೆ

ವರ್ಗ ಬದಲಾವಣೆಗಳ ಮೂಲಕ ಮತ್ತೊಂದು ಅಂಶವನ್ನು ತೋರಿಸಲು ಮತ್ತು ಮರೆಮಾಡಲು ಕೆಳಗಿನ ಬಟನ್‌ಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ:

.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>

ಬಹು ಗುರಿಗಳು

ಒಂದು <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>

ಅಕಾರ್ಡಿಯನ್ ಉದಾಹರಣೆ

ಕಾರ್ಡ್ ಘಟಕವನ್ನು ಬಳಸಿಕೊಂಡು , ನೀವು ಅಕಾರ್ಡಿಯನ್ ರಚಿಸಲು ಡೀಫಾಲ್ಟ್ ಕುಸಿತದ ನಡವಳಿಕೆಯನ್ನು ವಿಸ್ತರಿಸಬಹುದು.

ಅನಿಮ್ ಪ್ಯಾರಿಯಾಟುರ್ ಕ್ಲೀಷೆ ರಿಪ್ರೆಹೆಂಡರಿಟ್, ಎನಿಮ್ ಐಯುಸ್ಮೋಡ್ ಹೈ ಲೈಫ್ ಆಕ್ಯುಸಾಮಸ್ ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಆಡ್ ಸ್ಕ್ವಿಡ್. 3 ವುಲ್ಫ್ ಮೂನ್ ಅಫಿಷಿಯಾ ಆಟಿ, ನಾನ್ ಕ್ಯುಪಿಡಾಟ್ ಸ್ಕೇಟ್‌ಬೋರ್ಡ್ ಡೋಲರ್ ಬ್ರಂಚ್. ಫುಡ್ ಟ್ರಕ್ ಕ್ವಿನೋವಾ ನೆಸ್ಸಿಯಂಟ್ ಲೇಬರ್ ಐಯುಸ್ಮೋಡ್. ಬ್ರಂಚ್ 3 ವುಲ್ಫ್ ಮೂನ್ ಟೆಂಪೋರ್, ಸನ್ಟ್ ಅಲಿಕ್ವಾ ಅದರ ಮೇಲೆ ಪಕ್ಷಿಯನ್ನು ಹಾಕಿದೆ ಸ್ಕ್ವಿಡ್ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ನುಲ್ಲಾ ಅಸ್ಸುಮೆಂಡಾ ಶೋರೆಡಿಚ್ ಎಟ್. ನಿಹಿಲ್ ಅನಿಮ್ ಕೆಫಿಯೆಹ್ ಹೆಲ್ವೆಟಿಕಾ, ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಲೇಬರ್ ವೆಸ್ ಆಂಡರ್ಸನ್ ಕ್ರೆಡ್ ನೆಸ್ಸಿಯುಂಟ್ ಸಪಿಯೆಂಟೆ ಇಎ ಪ್ರೊಡೆಂಟ್. ಜಾಹೀರಾತು ಸಸ್ಯಾಹಾರಿ ಎಕ್ಸೆಪ್ಯೂರ್ ಬುತ್ಚೆರ್ ವೈಸ್ ಲೊಮೊ. ಲೆಗ್ಗಿಂಗ್ಸ್ occaecat ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್, ಕಚ್ಚಾ ಡೆನಿಮ್ ಸೌಂದರ್ಯದ ಸಿಂಥ್ ನೆಸ್ಸಿಯಂಟ್ ನೀವು ಬಹುಶಃ ಅವುಗಳನ್ನು ಆಕ್ಯುಸಾಮಸ್ ಲೇಬರ್ ಸುಸ್ಥಿರ VHS ಬಗ್ಗೆ ಕೇಳಿಲ್ಲ.

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 class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" 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="#accordionExample">
      <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" type="button" 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="#accordionExample">
      <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" type="button" 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="#accordionExample">
      <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 <a>ಅಥವಾ <div>), ಗುಣಲಕ್ಷಣrole="button"ಅಂಶಕ್ಕೆ ಸೇರಿಸಬೇಕು.

ನಿಮ್ಮ ನಿಯಂತ್ರಣ ಅಂಶವು ಒಂದೇ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡಿದ್ದರೆ - ಅಂದರೆ data-targetಗುಣಲಕ್ಷಣವು ಸೆಲೆಕ್ಟರ್‌ಗೆ ಸೂಚಿಸುತ್ತಿದ್ದರೆ - ನೀವು ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ಒಳಗೊಂಡಿರುವ ನಿಯಂತ್ರಣ ಅಂಶಕ್ಕೆ ಗುಣಲಕ್ಷಣವನ್ನು idಸೇರಿಸಬೇಕು . ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶಕ್ಕೆ ನೇರವಾಗಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಹೆಚ್ಚುವರಿ ಶಾರ್ಟ್‌ಕಟ್‌ಗಳನ್ನು ಬಳಕೆದಾರರಿಗೆ ಒದಗಿಸಲು ಆಧುನಿಕ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಮತ್ತು ಅಂತಹುದೇ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳು ಈ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುತ್ತವೆ.aria-controlsid

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪ್ರಸ್ತುತ ಅಳವಡಿಕೆಯು WAI-ARIA ಆಥರಿಂಗ್ ಪ್ರಾಕ್ಟೀಸ್ 1.1 ಅಕಾರ್ಡಿಯನ್ ಮಾದರಿಯಲ್ಲಿ ವಿವರಿಸಲಾದ ವಿವಿಧ ಕೀಬೋರ್ಡ್ ಸಂವಹನಗಳನ್ನು ಒಳಗೊಂಡಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ - ನೀವು ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಇವುಗಳನ್ನು ನೀವೇ ಸೇರಿಸಿಕೊಳ್ಳಬೇಕು.

ಬಳಕೆ

ಕುಸಿತದ ಪ್ಲಗಿನ್ ಭಾರ ಎತ್ತುವಿಕೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಕೆಲವು ವರ್ಗಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ:

.collapseವಿಷಯವನ್ನು ಮರೆಮಾಡುತ್ತದೆ
.collapse.showವಿಷಯವನ್ನು ತೋರಿಸುತ್ತದೆ
.collapsingಪರಿವರ್ತನೆಯು ಪ್ರಾರಂಭವಾದಾಗ ಸೇರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅದು ಪೂರ್ಣಗೊಂಡಾಗ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ

ಈ ವರ್ಗಗಳನ್ನು ನಲ್ಲಿ ಕಾಣಬಹುದು _transitions.scss.

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

ಒಂದು ಅಥವಾ ಹೆಚ್ಚು ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶಗಳ ನಿಯಂತ್ರಣವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿಯೋಜಿಸಲು ಅಂಶಕ್ಕೆ ಸೇರಿಸಿ data-toggle="collapse"ಮತ್ತು a . ಕುಸಿತವನ್ನು ಅನ್ವಯಿಸಲು ಗುಣಲಕ್ಷಣವು CSS ಆಯ್ಕೆಯನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ data-target. ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶಕ್ಕೆ data-targetವರ್ಗವನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ . collapseನೀವು ಅದನ್ನು ಡಿಫಾಲ್ಟ್ ಆಗಿ ತೆರೆಯಲು ಬಯಸಿದರೆ, ಹೆಚ್ಚುವರಿ ವರ್ಗವನ್ನು ಸೇರಿಸಿ show.

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಪ್ರದೇಶಕ್ಕೆ ಅಕಾರ್ಡಿಯನ್ ತರಹದ ಗುಂಪು ನಿರ್ವಹಣೆಯನ್ನು ಸೇರಿಸಲು, ಡೇಟಾ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ data-parent="#selector". ಇದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಲು ಡೆಮೊವನ್ನು ನೋಡಿ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ

ಇದರೊಂದಿಗೆ ಹಸ್ತಚಾಲಿತವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಿ:

$('.collapse').collapse()

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-parent="".

ಹೆಸರು	ಮಾದರಿ	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
ಪೋಷಕ	ಆಯ್ಕೆಗಾರ \| jQuery ವಸ್ತು \| DOM ಅಂಶ	ಸುಳ್ಳು	ಪೋಷಕರನ್ನು ಒದಗಿಸಿದರೆ, ಈ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಐಟಂ ಅನ್ನು ತೋರಿಸಿದಾಗ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಪೋಷಕರ ಅಡಿಯಲ್ಲಿ ಎಲ್ಲಾ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶಗಳನ್ನು ಮುಚ್ಚಲಾಗುತ್ತದೆ. `card`(ಸಾಂಪ್ರದಾಯಿಕ ಅಕಾರ್ಡಿಯನ್ ನಡವಳಿಕೆಯಂತೆಯೇ - ಇದು ವರ್ಗವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ ). ಗುರಿ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಪ್ರದೇಶದಲ್ಲಿ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿಸಬೇಕು.
ಟಾಗಲ್	ಬೂಲಿಯನ್	ನಿಜ	ಆಹ್ವಾನದಲ್ಲಿ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ

ವಿಧಾನಗಳು

ಅಸಮಕಾಲಿಕ ವಿಧಾನಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು

ಎಲ್ಲಾ API ವಿಧಾನಗಳು ಅಸಮಕಾಲಿಕವಾಗಿರುತ್ತವೆ ಮತ್ತು ಪರಿವರ್ತನೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತವೆ . ಪರಿವರ್ತನೆ ಪ್ರಾರಂಭವಾದ ತಕ್ಷಣ ಅವರು ಕರೆ ಮಾಡುವವರ ಬಳಿಗೆ ಹಿಂತಿರುಗುತ್ತಾರೆ ಆದರೆ ಅದು ಮುಗಿಯುವ ಮೊದಲು . ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪರಿವರ್ತನೆಯ ಘಟಕದಲ್ಲಿನ ವಿಧಾನದ ಕರೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ .

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ನಮ್ಮ 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	`show`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
ತೋರಿಸಲಾಗಿದೆ.bs.ಕುಸಿತ	ಕುಸಿತದ ಅಂಶವು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
hide.bs.collapse	`hide`ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
ಮರೆಮಾಡಲಾಗಿದೆ.bs.ಕುಸಿತ	ಬಳಕೆದಾರರಿಂದ ಕುಸಿತದ ಅಂಶವನ್ನು ಮರೆಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).

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

ಕುಗ್ಗಿಸು

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಉದಾಹರಣೆ

ಬಹು ಗುರಿಗಳು

ಅಕಾರ್ಡಿಯನ್ ಉದಾಹರಣೆ

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಗುಂಪು ಐಟಂ #1

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಗುಂಪು ಐಟಂ #2

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಗುಂಪು ಐಟಂ #3