Let’s say that you have a div that you want hidden and only displayed by a button when you click it. Here’s the solution:
<a href="#feeds" class="btn btn-default" data-toggle="collapse">Toggle Feeds</a> <div id="feeds" class="collapse"> This div (feeds) is hidden by default. </div>
Here’s how this works:
- Add a div named feeds around the content you want hidden. This needs to have a class named collapse added to it because its default display state is collapsed.
- Add an A tag with an href of “#feeds” above the content and a data-toggle named collapse.
- When the user clicks the A tag then the a tag’s data-toggle will be applied to the matching div.
Thank you to this Stack Overflow post.