9

Adding a Show / Hide Feature to Your Bootstrap 4 Divs

 3 years ago
source link: https://fuzzyblog.io/blog/bootstrap/2019/11/10/adding-a-show-hide-feature-to-your-bootstrap-divs.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Adding a Show / Hide Feature to Your Bootstrap 4 Divs

Nov 10, 2019

I know this is simple but I am JavaScript / CSS challenged so I'm writing it down because I've had continuous problems with it in the past and I know that this solution works for Bootstrap 4.

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:

  1. 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.
  2. Add an A tag with an href of "#feeds" above the content and a data-toggle named collapse.
  3. 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.

Posted In: #bootstrap #html #css


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK