Sometimes, we want to hide div by default and show it on click with Bootstrap.
In this article, we’ll look at how to hide div by default and show it on click with Bootstrap.
How to hide div by default and show it on click with Bootstrap?
To hide div by default and show it on click with Bootstrap, we add the data-toggle attribute.
For instance, we write
<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<button href="#Bar" class="btn btn-default" data-toggle="collapse">
Toggle Bar
</button>
<div id="Foo" class="collapse">This div is hidden by default</div>
<div id="Bar" class="collapse in">
This div is shown by default and can toggle
</div>
to add an a element and a button that has the data-toggle attribyte set to collapse.
We also set the href attribute to the IDs of the divs.
And then we have 2 divs that has the collapse class which we can toggle with the a and button elements respectively.
The in class makes the div show by default.
Conclusion
To hide div by default and show it on click with Bootstrap, we add the data-toggle attribute.
