Bootstrap 4 Collapse
Bootstrap 4 Collapse can easily show and hide content.
Example
<button data-toggle="collapse" data-target="#demo">Collapse</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Try it »
Example Analysis
.collapseThe class is used to specify a collapsible element (the <div> in the example); after clicking the button, it toggles between hiding and showing.
To control the hiding and showing of content, add on the <a> or <button> elementdata-toggle="collapse"attribute.data-target="#id"The attribute corresponds to the collapsible content (<div id="demo">).
Note:On the <a> element you can usehrefattribute to replacedata-targetattribute:
Example
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Try it »
By default, the collapsed content is hidden; you can add.showclass to make the content displayed by default:
Example
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Try it »
The following example displays a simple accordion by extending the card component.
Note:Usedata-parentattribute to ensure that all collapsible elements are under the specified parent element, so that when one collapsible option is shown, the other options are hidden.
Example
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">Option 1</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">#1 Content: Example Tutorial -- Learning is not only about technology, but also dreams!!!</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">Option 2</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">#2 Content: Example Tutorial -- Learning is not only about technology, but also dreams!!!</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">Option 3</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">#3 Content: Example Tutorial -- Learning is not only about technology, but also dreams!!!</div>
</div>
</div>
</div>
Try it »
Other extensions