Call Bootstrap4 collapsible without jQuery

I want to call Bootstrap collapse event without jQuery, and I though it will work with addEventListener, but only works if I call with:

$(navbarCollapse).on('show.bs.collapse', function () {});

Is there any way, like

navbarCollapse.addEventListener('show.bs.collapse', function () {});

maybe?

var navbarCollapse = document.querySelectorAll('.collapse');
navbarCollapse.addEventListener('show.bs.collapse', function () {
  alert('show');
});

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="fixed-top">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

Call Bootstrap4 collapsible without jQuery

0 Answers