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?

Possible duplicate of [Can I use twitter bootstrap without jquery?](https://stackoverflow.com/questions/14608681/can-i-use-twitter-bootstrap-without-jquery) — Taplar, May 15 '19 at 16:19

camainc · Answer 1 · 2019-11-18T19:49:46.183

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>

I thought the requirement of the OP was to not use any jQuery whatsoever. — grooveplex, May 15 '19 at 19:30
Good point, @grooveplex, but since using Bootstrap interactions requires the use of jQuery, my answer shows how to do what he wants using only data attributes. If Zoop wants to avoid jQuery altogether he/she will have to use some other CSS framework than Bootstrap. — camainc, Jul 02 '19 at 16:57

How to call Bootstrap's collapse method without JQuery

1 Answers1