ମୁଖ୍ୟ ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ | ଡକସ୍ ନେଭିଗେସନ୍ କୁ ଯାଆନ୍ତୁ |
in English

ଭୁଶୁଡ଼ିବା |

କିଛି ପ୍ରୋଜେକ୍ଟ ଏବଂ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ତୁମର ପ୍ରୋଜେକ୍ଟରେ ବିଷୟବସ୍ତୁର ଦୃଶ୍ୟତାକୁ ଟୋଗଲ୍ କର |

ଏହା କିପରି କାମ କରେ |

ବିଷୟବସ୍ତୁ ଦେଖାଇବା ଏବଂ ଲୁଚାଇବା ପାଇଁ କ୍ଲାସ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ବ୍ୟବହୃତ ହୁଏ | ବଟନ୍ କିମ୍ବା ଆଙ୍କର୍ ଟ୍ରିଗର ଭାବରେ ବ୍ୟବହୃତ ହୁଏ ଯାହା ତୁମେ ଟୋଗଲ୍ କରୁଥିବା ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନଗୁଡ଼ିକ ସହିତ ମ୍ୟାପ୍ ହୋଇଯାଏ | ଏକ ଉପାଦାନକୁ ସଂଲଗ୍ନ କରିବା heightଏହାର ସାମ୍ପ୍ରତିକ ମୂଲ୍ୟରୁ ଆନିମେସନ୍ କରିବ 0| CSS କିପରି ଆନିମେସନ୍ ନିୟନ୍ତ୍ରଣ କରେ, ଆପଣ paddingଏକ .collapseଉପାଦାନରେ ବ୍ୟବହାର କରିପାରିବେ ନାହିଁ | ଏହା ପରିବର୍ତ୍ତେ, ଶ୍ରେଣୀକୁ ଏକ ସ୍ independent ାଧୀନ ରାପିଙ୍ଗ୍ ଉପାଦାନ ଭାବରେ ବ୍ୟବହାର କରନ୍ତୁ |

ଏହି ଉପାଦାନର ଆନିମେସନ୍ ପ୍ରଭାବ prefers-reduced-motionମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ |

ଉଦାହରଣ |

ଶ୍ରେଣୀ ପରିବର୍ତ୍ତନ ମାଧ୍ୟମରେ ଅନ୍ୟ ଏକ ଉପାଦାନ ଦେଖାଇବା ଏବଂ ଲୁଚାଇବା ପାଇଁ ନିମ୍ନରେ ଥିବା ବଟନ୍ କ୍ଲିକ୍ କରନ୍ତୁ:

  • .collapseବିଷୟବସ୍ତୁ ଲୁଚାଏ |
  • .collapsingସଂକ୍ରମଣ ସମୟରେ ପ୍ରୟୋଗ କରାଯାଏ |
  • .collapse.showବିଷୟବସ୍ତୁ ଦେଖାଏ |

ସାଧାରଣତ ,, ଆମେ data-bs-targetଗୁଣ ସହିତ ଏକ ବଟନ୍ ବ୍ୟବହାର କରିବାକୁ ସୁପାରିଶ କରୁ | ଏକ ଅର୍ଥଗତ ଦୃଷ୍ଟିକୋଣରୁ ସୁପାରିଶ କରାଯାଇନଥିବାବେଳେ, ଆପଣ hrefଗୁଣ (ଏବଂ କ 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ଶ୍ରେଣୀକୁ ଯୋଡନ୍ତୁ ଏବଂ ତୁରନ୍ତ ଶିଶୁ ଉପାଦାନ ଉପରେ ସେଟ୍ କରନ୍ତୁ | ନିଜର କଷ୍ଟମ୍ ସାସ୍ ଲେଖିବାକୁ, ଇନଲାଇନ ଶ yles ଳୀ ବ୍ୟବହାର କରିବାକୁ, କିମ୍ବା ଆମର ମୋଟେଇ ଉପଯୋଗିତା ବ୍ୟବହାର କରିବାକୁ ମୁକ୍ତ ମନେ କର |widthheightwidth

ଦୟାକରି ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ 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", ତାହା ବଦଳରେ ନିୟନ୍ତ୍ରଣରେ ସେଟ୍ କର | ପ୍ଲଗଇନ୍ ସ୍ automatically ତ automatically ସ୍ପୃତ ଭାବରେ ଏହି ଗୁଣକୁ ନିୟନ୍ତ୍ରଣରେ ଟୋଗଲ୍ କରିବ ଯାହା ଉପରେ ନଷ୍ଟ ହୋଇପାରୁଥିବା ଉପାଦାନ ଖୋଲାଯାଇଛି କି ବନ୍ଦ ହୋଇଛି (ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ, କିମ୍ବା ଉପଭୋକ୍ତା ଅନ୍ୟ ଏକ ନିୟନ୍ତ୍ରଣ ଉପାଦାନକୁ ସମାନ ଧକ୍କା ଉପାଦାନ ସହିତ ବାନ୍ଧି ରଖିଛନ୍ତି) ଉପରେ ଆଧାର କରି | ଯଦି କଣ୍ଟ୍ରୋଲ୍ ଉପାଦାନର HTML ଉପାଦାନ ଏକ ବଟନ୍ ନୁହେଁ (ଯଥା, ଏକ <a>କିମ୍ବା <div>), ଗୁଣ |role="button"ଉପାଦାନରେ ଯୋଡାଯିବା ଉଚିତ |

ଯଦି ଆପଣଙ୍କର କଣ୍ଟ୍ରୋଲ୍ ଉପାଦାନ ଗୋଟିଏ ଭୁଶୁଡ଼ି ପଡୁଥିବା ଉପାଦାନକୁ ଟାର୍ଗେଟ୍ କରୁଛି - ଅର୍ଥାତ୍ data-bs-targetଆଟ୍ରିବ୍ୟୁଟ୍ ଏକ idସିଲେକ୍ଟର୍ କୁ ସୂଚାଉଛି - ତୁମେ aria-controlsକଣ୍ଟ୍ରୋଲ୍ ଏଲିମେଣ୍ଟରେ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡିବା ଉଚିତ, idଯାହା ଭୁଶୁଡ଼ିବା ଉପାଦାନକୁ ଧାରଣ କରିଥାଏ | ଆଧୁନିକ ସ୍କ୍ରିନ ପାଠକ ଏବଂ ସମାନ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ଏହି ଗୁଣର ବ୍ୟବହାର କରି ଉପଭୋକ୍ତାମାନଙ୍କୁ ସିଧାସଳଖ ନଷ୍ଟ ହୋଇଯାଉଥିବା ଉପାଦାନକୁ ନେଭିଗେଟ୍ କରିବା ପାଇଁ ଅତିରିକ୍ତ ସର୍ଟକଟ୍ ଯୋଗାଇଥାଏ |

ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ସାମ୍ପ୍ରତିକ କାର୍ଯ୍ୟକାରିତା WAI-ARIA ପ୍ରାଧିକରଣ ଅଭ୍ୟାସ 1.1 ଆକର୍ଡିଅନ୍ ପ୍ୟାଟର୍ରେ ବର୍ଣ୍ଣିତ ବିଭିନ୍ନ ବ al କଳ୍ପିକ କୀବୋର୍ଡ୍ ପାରସ୍ପରିକ କାର୍ଯ୍ୟକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ନାହିଁ - ଆପଣଙ୍କୁ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ ଏହାକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ପଡିବ |

ସାସ୍ |

ଭେରିଏବଲ୍ |

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

ଏକ ସଂପନ୍ନ ଅଞ୍ଚଳରେ ଆକର୍ଡିଅନ୍ ପରି ଗୋଷ୍ଠୀ ପରିଚାଳନା ଯୋଡିବାକୁ, ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ data-bs-parent="#selector"| ଅଧିକ ସୂଚନା ପାଇଁ ଆକ୍ରେଡୋନ୍ ପୃଷ୍ଠାକୁ ଅନୁସରଣ କରନ୍ତୁ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

ସହିତ ମାନୁଆଲ୍ ସକ୍ଷମ କରନ୍ତୁ:

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

ବିକଳ୍ପଗୁଡ଼ିକ

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-bs-ଯେପରି ଯୋଡନ୍ତୁ data-bs-parent=""|

ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
parent ଚୟନକର୍ତ୍ତା | jQuery ବସ୍ତୁ | DOM ଉପାଦାନ | false ଯଦି ପ୍ୟାରେଣ୍ଟ୍ ପ୍ରଦାନ କରାଯାଏ, ତେବେ ଏହି ପ୍ୟାଲେସିବଲ୍ ଆଇଟମ୍ ଦେଖାଯିବାବେଳେ ନିର୍ଦ୍ଦିଷ୍ଟ ପ୍ୟାରେଣ୍ଟ୍ ଅନ୍ତର୍ଗତ ସମସ୍ତ ଭୁଶୁଡ଼ିବା ଉପାଦାନ ବନ୍ଦ ହୋଇଯିବ | (ପାରମ୍ପାରିକ ଆକର୍ଡିଅନ୍ ଆଚରଣ ପରି - ଏହା cardଶ୍ରେଣୀ ଉପରେ ନିର୍ଭରଶୀଳ) | ଆଟ୍ରିବ୍ୟୁଟ୍ ଟାର୍ଗେଟ୍ କ୍ଲାପ୍ସିବଲ୍ ଏରିଆରେ ସେଟ୍ ହେବା ଆବଶ୍ୟକ |
toggle ବୁଲିଅନ୍ true ଆହ୍ୱାନରେ ସଂପୃକ୍ତ ଉପାଦାନକୁ ଟୋଗଲ୍ କରେ |

ପ୍ରଣାଳୀ

ଅସନ୍ତୁଳିତ ପଦ୍ଧତି ଏବଂ ସ୍ଥାନାନ୍ତରଣ |

ସମସ୍ତ API ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |

ଅଧିକ ସୂଚନା ପାଇଁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଦେଖନ୍ତୁ |

ତୁମର ବିଷୟବସ୍ତୁକୁ ଏକ ସଂପୃକ୍ତ ଉପାଦାନ ଭାବରେ ସକ୍ରିୟ କରିଥାଏ | ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ଗ୍ରହଣ କରେ object|

କନଷ୍ଟ୍ରକ୍ଟର୍ ସହିତ ଆପଣ ଏକ ପତନ ଉଦାହରଣ ସୃଷ୍ଟି କରିପାରିବେ, ଉଦାହରଣ ସ୍ୱରୂପ:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
ପଦ୍ଧତି ବର୍ଣ୍ଣନା
toggle ଦେଖାଯାଇଥିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପାଇଁ ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନକୁ ଟୋଗଲ୍ କରେ | ଭୁଶୁଡ଼ି ପଡୁଥିବା ଉପାଦାନ ପ୍ରକୃତରେ ଦେଖାଯିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍shown.bs.collapse କୁ ଫେରିଥାଏ hidden.bs.collapse|
show ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନ ଦେଖାଏ | ଭୁଶୁଡ଼ିବା ଉପାଦାନ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଯାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, shown.bs.collapseଘଟଣା ଘଟିବା ପୂର୍ବରୁ) |
hide ଏକ ଭୁଶୁଡ଼ୁଥିବା ଉପାଦାନକୁ ଲୁଚାଇଥାଏ | ଭୁଶୁଡ଼ି ପଡୁଥିବା ଉପାଦାନ ପ୍ରକୃତରେ ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଥାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, hidden.bs.collapseଘଟଣା ଘଟିବା ପୂର୍ବରୁ) |
dispose ଏକ ଉପାଦାନର ପତନକୁ ନଷ୍ଟ କରେ | (DOM ଉପାଦାନରେ ଗଚ୍ଛିତ ତଥ୍ୟ ଅପସାରଣ କରେ)
getInstance ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ପତନ ପରିସ୍ଥିତି ପାଇବାକୁ ଅନୁମତି ଦିଏ, ଆପଣ ଏହାକୁ ଏହିପରି ବ୍ୟବହାର କରିପାରିବେ:bootstrap.Collapse.getInstance(element)
getOrCreateInstance ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଏକ ପତନ ଘଟଣାକୁ ଫେରସ୍ତ କରିଥାଏ କିମ୍ବା ଏହା ପ୍ରାରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରିଥାଏ | ଆପଣ ଏହାକୁ ଏହିପରି ବ୍ୟବହାର କରିପାରିବେ:bootstrap.Collapse.getOrCreateInstance(element)

ଘଟଣା

ବୁଟ୍ଷ୍ଟ୍ରାପ୍ ର କ୍ଲାସ୍ କ୍ଲାସ୍ କ୍ଲାସ୍ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଘଟଣା ପ୍ରକାଶ କରେ |

ଇଭେଣ୍ଟ ପ୍ରକାର | ବର୍ଣ୍ଣନା
show.bs.collapse showଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ |
shown.bs.collapse ଉପଭୋକ୍ତାଙ୍କୁ ଏକ ପତନ ଉପାଦାନ ଦୃଶ୍ୟମାନ ହେବାପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଇଥାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) |
hide.bs.collapse hideପଦ୍ଧତି ଡାକିବା ପରେ ତୁରନ୍ତ ଏହି ଘଟଣାକୁ ବରଖାସ୍ତ କରାଯାଏ |
hidden.bs.collapse ଉପଭୋକ୍ତାଙ୍କ ଠାରୁ ଏକ ପତନ ଉପାଦାନ ଲୁଚି ରହିଥିବାବେଳେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଇଥାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})