A collapsible component is very essential when you want to display a huge amount of content on a single web page. The advantage of using a collapsible is that it prevents you from cluttering your web page with loads of content and thereby enhancing the user experience.
A collapsible basically lets you show and hide content using HTML elements. Here we have discussed how you can hide or show content using collapse class in Bootstrap 5.
How to hide/show content using collapse class in Bootstrap 5
As already mentioned a collapsible lets’ you show and hide huge content on a web page. If you are wondering how a collapsible is created and used to hide/show content using Bootstrap 5 then consult the upcoming sections.
How to hide content using a <button> element
One way to create a collapsible is by using the <button> element.
HTML
<div id="linux" class="collapse">
<h3>This is some heading</h3>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
In the above code, the div container has been made collapsible by assigning it the .collapse class. Afterward, some content has been placed inside that div which will be hidden or shown using the collapsible button.
The <button> element is being used to hide/show the content inside the collapsible div by assigning the data-bs-toggle=“collapse”. Furthermore, data-bs-target=“#id” is used to link the button to the collapsible div container.
Output
This is how you can hide/show content using collapsible buttons.
How to hide content using a <a> tag
Another way of generating a collapsible is by using the <a> tag. Here we have shown this method in the code snippet below.
HTML
The rest of the code will be the same as above with the only difference that here we have used an <a> tag inside of a <button> element and to control the content we have assigned the data-bs-toggle=“collapse” to the anchor tag and the id that connects this tag to the collapsible div container has been assigned to the href attribute.
Output
A collapsible was successfully made using the anchor tag.
How to use the .show class
By default, the content inside a collapsible will be hidden and will show when the button or the link is clicked. But if you want your content to be shown by default and hide it after the button/link is clicked then use the .show class.
HTML
Here the div container has been assigned the .show class along with .collapse class. This will alter the default behavior of the collapsible and the content will be shown by default and will hide once the link is clicked.
Output
The .show class is working properly.
Conclusion
For the purpose of hiding or showing content using collapse class assign data-bs-toggle=“collapse” to a <button> element or an <a> tag and link these elements with the collapsible element using data-bs-target=“#id” in case of a button and href=“#id” in case of a link. The content is hidden in a collapsible by default, however, if you wish to change this default behavior then use the .show class.
