CODEWITHSUNDEEP
javascripttwitter-bootstrapcss-transitionsdelaybootstrap-4
DjangoUrl
DjangoUrl

Reputation: 57

Delay showing of collapse in Bootstrap?

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>

Upvotes: 2

Views: 15436

Answers (3)

user10554224
user10554224

Reputation: 1

This will allow you to set a delay manually or with another function as well as prevent transition till you are ready 

var delay = false,delayed=900;
$('[role="button"]') .on('click', function (e) {  
  var $this   = $(this), href
  var target  = $this.attr('data-target')
      || e.preventDefault()
      || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
  var $target = $(target)
  var data    = $target.data('bs.collapse')
  var option  = data ? 'toggle' : $this.data()
  var parent  = $this.attr('data-parent')
  var $parent = parent && $(parent)

 if(!delay){ 
  setTimeout(()=>{delay=true;  $target.collapse(option); 
  delay = false },delayed); 
  return false    
}   

if (!data || !data.transitioning) {
  if ($parent) $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
    $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
  }

  $target.collapse(option)
})

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362430

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

Upvotes: 1

ju_
ju_

Reputation: 566

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>

Upvotes: 1

Related Questions