Is there a way to postpone the collapse functionality in Bootstrap?

Question

Is there a way to postpone the collapse functionality in Bootstrap?

Is there a way to delay the display of collapsed elements in Bootstrap 4?

For instance, how can you postpone the content of a Link href button from appearing in the example provided 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>

javascript twitter-bootstrap css-transitions delay bootstrap-4

Answer 1

Answer №1

If you want to customize the collapse behavior in my solution, you have the option to utilize the data-delayed-toggle and data-delay attributes on the trigger element:

$('[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>

Answer 2

If you want to customize the collapse behavior in my solution, you have the option to utilize the data-delayed-toggle and data-delay attributes on the trigger element:

$('[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>

Answer 3

Answer №2

The CSS animations are achieved with the use of CSS and the jQuery library to switch CSS classes dynamically.

If a slight delay is desired, the transition-delay: property can be applied to the .collapsing class. For instance, a delay of 2 seconds can be implemented as shown below.

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

Subsequently, Bootstrap's JavaScript will trigger and add the .show class to the element. To prolong the delay in visibility, an additional delay can be added to the .collapse.show class...

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

Answer 4

The CSS animations are achieved with the use of CSS and the jQuery library to switch CSS classes dynamically.

If a slight delay is desired, the transition-delay: property can be applied to the .collapsing class. For instance, a delay of 2 seconds can be implemented as shown below.

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

Subsequently, Bootstrap's JavaScript will trigger and add the .show class to the element. To prolong the delay in visibility, an additional delay can be added to the .collapse.show class...

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

Answer 5

Answer №3

This snippet of code provides the capability to manually set a delay or use another function to control transitions and ensure they do not execute until you are ready.

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

Answer 6

This snippet of code provides the capability to manually set a delay or use another function to control transitions and ensure they do not execute until you are ready.

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

Is there a way to postpone the collapse functionality in Bootstrap?

Answer №1

Answer №2

Answer №3

Similar questions

Integrating Whatsapp cloud API with a React web application allows for seamless communication between

When a page with parameters is reloaded, React fails to initiate

When using Node.js with Express and ssh2, my data structures remain intact without any resets when loading web pages

Is there a built-in constant in the Angular framework that automatically resolves a promise as soon as it

Aligning content vertically in Bootstrap 4 so it is centered

Sequelize - utilizing the where clause with counting

Executing Firebase Cloud Functions to perform write operations within a database event function

Tips for determining what elements are being updated in terms of style

Errors are not displayed or validated when a FormControl is disabled in Angular 4

Error: The `Field` component encountered a failed prop type validation due to an invalid prop `component` after upgrading to MUI version

"Submit form data without reloading the page using the $_

Change the spread operator in JavaScript to TypeScript functions

Navigate to the final element of a mapped array

Retrieve a string value in Next.JS without using quotation marks

Even though the onSubmit attribute is set to false in the HTML form, it still submits

Steps for designing an HTML table that expands and collapses partially

Using Jquery Ajax to Develop Laravel Dropdown Selection with Cascading Feature

When attempting to duplicate a project from Bitbucket and working in VS Code, I encountered several errors and warnings while running npm install

Transform a JavaScript Array into a JSON entity

The functionality of Jquery autocomplete _renderItem appears to be malfunctioning