Bootstrap 4 Collapse

Add collapsible content easily with Bootstrap's .collapse and related classes.

You can make your content collapsible by adding data-toggle="collapse" to either a button or a hyperlink.

The button or link references the ID of the content to collapse.

Using a Link

Use the <a> tag with an href value of the ID of the content to collapse.

On the collapsible content's container, add the .collapse class, and be sure to give it an ID.

<p><a data-toggle="collapse" href="#footwear" aria-expanded="false" aria-controls="footwear">Footwear</a>
</p>
<div class="collapse" id="footwear">
<p>Footwear refers to garments worn on the feet, which originally serves to purpose of protection against adversities of the environment, usually regarding ground textures and temperature.</p>
</div>

Using a Button

Use the data-target attribute with a value of the ID of the content to collapse.

On the collapsible content's container, add the .collapse class, and be sure to give it an ID.

<button class="btn btn-info" type="button" data-toggle="collapse" data-target="#footwear" aria-expanded="false" aria-controls="footwear">
Footwear
</button>
  
<div class="collapse" id="footwear">
<p>Footwear refers to garments worn on the feet, which originally serves to purpose of protection against adversities of the environment, usually regarding ground textures and temperature.</p>
</div>

Accordion

Collapsible content is often used to make an "accordion". Accordions are popular for content such as FAQs, product overviews, etc

You can use Bootstrap cards to style the accordion like below.

Add the .show class to the collapsible content to have it expanded when the page loads. Also use aria-expanded="true" in this case.

<div id="faq" role="tablist" aria-multiselectable="true">

<div class="card">
<div class="card-header" role="tab" id="questionOne">
<h5 class="card-title">
<a data-toggle="collapse" data-parent="#faq" href="#answerOne" aria-expanded="true" aria-controls="answerOne">
What if my boots are too big for my feet?
</a>
</h5>
</div>
<div id="answerOne" class="collapse show" role="tabcard" aria-labelledby="questionOne">
<div class="card-body">
Stuff your boots with newspaper or tissue.
</div>
</div>
</div>

<div class="card">
<div class="card-header" role="tab" id="questionTwo">
<h5 class="card-title">
<a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#answerTwo" aria-expanded="false" aria-controls="answerTwo">
Can I wear my boots inside?
</a>
</h5>
</div>
<div id="answerTwo" class="collapse" role="tabcard" aria-labelledby="questionTwo">
<div class="card-body">
No. Your mama should've told you about this.
</div>
</div>
</div>

<div class="card">
<div class="card-header" role="tab" id="questionThree">
<h5 class="card-title">
<a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#answerThree" aria-expanded="true" aria-controls="answerThree">
What if my boots get slippery when wet?
</a>
</h5>
</div>
<div id="answerThree" class="collapse in" role="tabcard" aria-labelledby="questionThree">
<div class="card-body">
Keep your boots dry.
</div>
</div>
</div>

</div>