Bootstrap 4 Collapse

Bootstrap 4 Collapse is useful when you want to hide or show information.

Example 1: Click the button to hide or show contents.

<button class="btn btn-success" data-toggle="collapse" data-target="#html">Full Form of HTML</button>
<div id="html" class="collapse">
  <p>Full Form of HTML is Hyper Text Markup Language.</p>
</div>

Full Form of HTML

By default, the collapsible content is hidden. However, you can add the .show class to show the content.

<button class="btn btn-success" data-toggle="collapse" data-target="#html3">Full Form of HTML</button>
<div id="html3" class="collapse show">
  <p>Full Form of HTML is Hyper Text Markup Language.</p>
</div>

Full Form of HTML

Collapse with anchor tag

<a href="#html2" data-toggle="collapse">Full Form of HTML</a>
<div id="html2" class="collapse">
  <p>Full Form of HTML is Hyper Text Markup Language.</p>
</div>

Full Form of HTML

Bootstrap Accordion

Example 2: Simple accordion by using the card component.

<div id="accordion">
   <div class="card">
      <div class="card-header">
         <a href="#acc1" data-toggle="collapse" data-parent="#accordion" class="card-link">
            Accordion Heading 1
         </a>
      </div>
      <div id="acc1" class="collapse show">
         <div class="card-body">
            Content to be display for 1st container <br> More text to be display <br> Some more text.
         </div>
      </div> 
   </div>
	
   <div class="card">
      <div class="card-header">
         <a href="#acc2" class="collapsed card-link" data-toggle="collapse" data-parent="#accordion">
	        Accordion Heading 2
         </a>
      </div>
      <div id="acc2" class="collapse">
         <div class="card-body">
            Content to be display for 2nd container <br> More text to be display <br> Some more text.
         </div>
      </div>
   </div> 
	
   <div class="card">
      <div class="card-header">
         <a href="#acc3" class="collapsed card-link" data-toggle="collapse" data-parent="#accordion">
            Accordion Heading 3
         </a>
      </div>
      <div id="acc3" class="collapse">
         <div class="card-body"> 
		    Content to be display for 3rd container <br> More text to be display <br> Some more text.
         </div>
      </div> 
   </div>
</div>