MENU


Collapse

A Collapse component toggles the visibility of some content.

You can create a Collapse component with either an element or a <button> element.When the user clicks the right button, two boxes appear at the same time…
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <a class="btn btn-primary" data-toggle="collapse" href="#d1" role="button" aria-expanded="false" aria-controls="d1">
      Toggle first element
   </a>
   <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="d1 d2">
      Toggle both elements
   </button>
   <div class="row">
      <div class="col">
         <div class="collapse multi-collapse" id="d1">
            <div class="card card-body">
               The world economy or the global economy is the economy of all humans of the world, referring to the global economic system which includes all economic activities which are conducted both within and between nations, including production, consumption, economic management, work in general, exchange of financial values and trade of goods and services.[1][2] In some contexts, the two terms are distinct "international" or "global economy" being measured separately and distinguished from national economies while the "world economy" is simply an aggregate of the separate countries' measurements. Beyond the minimum standard concerning value in production, use and exchange, the definitions, representations, models and valuations of the world economy vary widely. It is inseparable from the geography and ecology of planet Earth.
            </div>
         </div>
      </div>
      <div class="col">
         <div class="collapse multi-collapse" id="d2">
            <div class="card card-body">
               Language development in humans is a process starting early in life. Infants start without knowing a language, yet by 10 months, babies can distinguish speech sounds and engage in babbling. Some research has shown that the earliest learning begins in utero when the fetus starts to recognize the sounds and speech patterns of its mother's voice and differentiate them from other sounds after birth.
            </div>
         </div>
      </div>
   </div>

</body><html>

A few classes are used to manage the Collapse component:
   .collapse hides the content.
   .collapse.show shows the content.
   .collapsing is added when the transition starts,
and removed when it finishes.

JavaScript:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse')); var collapseList = collapseElementList.map(el => { return new bootstrap.Collapse(el); });var myCollapse = document.getElementById('myCollapse'); var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false, // defaults to true: toggles on invocation? parent: p // defaults to false: parent of all // collapsible items to be closed on toggling }); // bootstrap.Collapse.getInstance(collapseEl);bsCollapse.toggle(); bsCollapse.show(); bsCollapse.hide(); bsCollapse.dispose();var myCollapsible = document.getElementById('myCollapsible'); myCollapsible.addEventListener('hidden.bs.collapse', ()=>{ // do something... });