Bootstrap 4 Collapse, How To Learn Bootstrap 4 Collapse Tutorial

Bootstrap 4 Tutorial

Bootstrap 4 Collapse

The Bootstrap's collapsibles are useful when you want to hide and show large amount of content.

The collapsible classes are :

.collapse hides content

.collapsing is applied during transitions

.collapse.show shows content.

To add control the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content .

<div>
  <a class="btn btn-primary" data-toggle="collapse" href="#BT4Collapse" aria-expanded="false" aria-controls="BT4Collapse">
    Link
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#BT4Collapse" aria-expanded="false" aria-controls="BT4Collapse">
    Button
  </button>
</div>
<div class="collapse" id="BT4Collapse">
  <div class="card card-body">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a 
	type specimen book. It has survived not only five centuries, but also the 
	leap into electronic typesetting, remaining essentially unchanged.
  </div>
</div>

Output :

Multiple Targets

The show and hide multiple elements by referencing them with a JQuery selector in its href or data-target attribute.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapse1" aria-expanded="false" aria-controls="multiCollapse1">First Element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapse2" aria-expanded="false" aria-controls="multiCollapse2">Second Element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapse1 multiCollapse2">Toggle Both Elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapse1">
      <div class="card card-body">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a 
	type specimen book. It has survived not only five centuries, but also the 
	leap into electronic typesetting, remaining essentially unchanged.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapse2">
      <div class="card card-body">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a 
	type specimen book. It has survived not only five centuries, but also the 
	leap into electronic typesetting, remaining essentially unchanged.
      </div>
    </div>
  </div>
</div>

Output :

Bootstrap 4 Accordion

Using the card component in data-parent attribute. you can extend the default collapse behavior to create an accordion.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapse1" aria-expanded="false" aria-controls="multiCollapse1">First Element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapse2" aria-expanded="false" aria-controls="multiCollapse2">Second Element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapse1 multiCollapse2">Toggle Both Elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapse1">
      <div class="card card-body">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a 
	type specimen book. It has survived not only five centuries, but also the 
	leap into electronic typesetting, remaining essentially unchanged.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapse2">
      <div class="card card-body">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a 
	type specimen book. It has survived not only five centuries, but also the 
	leap into electronic typesetting, remaining essentially unchanged.
      </div>
    </div>
  </div>
</div>

Output :

Bootstrap 4 Tutorial