How to call Bootstrap's collapse method without JQuery

Question

We have a few TypeScript files, but no way to access jQuery from them. We want to call Bootstrap's collapse method...

$(object).collapse(method)

without using jQuery.

Desired Result

//Mimics the functionality of Bootstrap's jQuery collapse.
function Collapse(object, method)
{
    /* Magic jQuery avoidance here */.collapse(method);
}

However, with Googling and some skim reading of Bootstrap's code, I don't see anything obvious and straightforward to try. How can I call Bootstrap's collapse method without jQuery?

Answer 1

Short answer: you cannot. Bootstrap relies on jQuery (at least as of v.4) for the various interactions.

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.

https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

If you don't want jQuery included in your project, you'll need to use a different framework.

With all that said, you can use the collapse interaction without calling jQuery directly by using data attributes.

You can use the data attributes, as shown in the Bootstrap documentation.

https://getbootstrap.com/docs/4.0/components/collapse/#via-data-attributes

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <p> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target </button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div>