Harness the dynamic nature of Bootstrap Collapse component!
This Javascript plugin allows you to hide and show content by toggling the visibility of elements based on a trigger.
Create dynamic accordions, interactive dropdowns and transform your menus from static to stunning in 2 steps!
Getting Started with Bootstrap Collapse!
This is your first step to BS Collapse success!
Create a <div> container that triggers the execution of the component’s functions by using these attributes:
class=”collapsed” – It indicates that the collapsed class will manage the element’s behavior, enabling it to communicate with the BS library and execute the properties.
data-toggle=”collapse” – It specifies that the element’s type is collapsible.
href=”#item-1″ – It establishes the ID of the element that will show/hide when clicking.
aria-expanded=”true”– It indicates that the element will be expanded and collapsed.
Taking Bootstrap Collapse to the Next Level!
It’s time to take your second step to Bootstrap Collapse success!
Create the second element. This will be the element that shows and hides.
You can use any type of tag, as long as it adheres to these attributes:
class=”collapse”
id=”item-1″ – The identifier must match the one in the parent container.
Based on these two steps, you can create as many items as you wish.
Watch The Bootstrap Collapse Magic Happen!
Take a look at this animated example!
Dive into Bootstrap’s Written Code!
Get the full picture of how it’s done!
<div class="collapsed" data-toggle="collapse" href="#item-1" aria-expanded="true">
<span>Element #1</span>
<div class="collapse" id="item-1">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
</div>
<div class="collapsed" data-toggle="collapse" href="#item-2" aria-expanded="true">
<span>Element #2</span>
<div class="collapse" id="item-2">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo </p>
</div>
</div>
<div class="collapsed" data-toggle="collapse" href="#item-3" aria-expanded="true">
<span>Element #3</span>
<div class="collapse" id="item-3">
<p> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
</div>
</div>Mastering Bootstrap Collapse can transform your website design and development. With the ability to create dynamic, collapsible content, you can enhance user experience and improve the functionality of your website, making it stand out in today’s competitive digital landscape!
If you’re eager to master another code skill in the blink of an eye, don’t miss out on these 5 Steps to Create Api’s at Warp Speed!
✍🏽This article was written by our copywriter, Sofia, in collaboration with our DEV expert, Heberlyn.