Delay showing of collapse in Bootstrap?

Question

How do you delay showing of collapsed elements in Bootstrap 4?

For example ho do you delay showing content of Link href button in the example below?

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>

<div class="collapse" id="collapseExample">
    <div class="card card-block">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus          richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes          anderson cred nesciunt sapiente ea proident.
    < div>
</div>

Solution 1

In my solution you can use data-delayed-toggle and data-delay attributes on the trigger element to configure your collapse behaviour:

$('[data-delayed-toggle="collapse"]').on('click', function(e) {

      var delay = $(this).data('delay') || 1000;
      var $target = $($(this).attr("href"));

      window.setTimeout(function() {
        
        if ($target.hasClass('show'))
            $target.collapse('hide');
         else
            $target.collapse('show');
          }, delay);

      })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<p>
  <a class="btn btn-primary" data-delayed-toggle="collapse" href="#collapseExample" data-delay="300">
    Link with href
  </a>
  <div class="collapse" id="collapseExample">
    <div class="card card-block">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      < div>
    </div>

Solution 2

The animation is done via CSS, and the CSS classes are switched using jQuery.

If you just want to delay it a little, use transition-delay: on the .collapsing class. For example, here is 2 seconds.

.collapsing {
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
    visibility: hidden;
}

But after a while Bootstrap's JS will kick in and apply the .show class to the element. So, to further delay the visibility you can also add a delay .collapse.show...

.collapse.show {
    -webkit-transition-delay: 3s;
    transition-delay: 3s;
    visibility: visible;
}

https://www.codeply.com/go/ZbrrAueeLV

Comments

[DjangoUrl]

This delays opening and closing content, what if delay only when opening?

[DjangoUrl]

something like apple.com handle collapsing menu www.apple.com, notice how the button cascade with menu on opening and closing.

[Zim]

That's a different animation, not a delay.