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
One way to create a collapsible is by using the
HTML
<button type=“button” class=“btn btn-info text-white” data-bs-toggle=“collapse” data-bs-target=“#linux”>Click me</button>
<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
Output
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image1-3.gif" height="268" src="data:image/svg xml,” width=”628″>
This is how you can hide/show content using collapsible buttons.
How to hide content using a tag
Another way of generating a collapsible is by using the 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 tag inside of a 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
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image1-3.gif" height="268" src="data:image/svg xml,” width=”628″>
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
<div id=“linux” class=“collapse show”>
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
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image2-3.gif" height="268" src="data:image/svg xml,” width=”628″>
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 element or an 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.
About the author
<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/B49B6FDCE1F74B3598C4C9BF564AEBEC-150×150.jpg625e23f9aa91c.jpg" height="112" src="data:image/svg xml,” width=”112″>
Naima Aftab
I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.
