Bootstrap 4 show.bs.collapse doesn't trigger event

user_11908297 0
Viewed 44

I have a series of nested collapsible divs using Bootstrap 4. I want to do something when the inner-most div is expanded, right now it's just set an alert, but I can't get show.bs.collapse or shown.bs.collapse to fire.

Here is a codepen showing the issue: https://codepen.io/xanabobana/pen/pobRxpx

My Code:

$(".category_carat").click(function() {
  $(this).closest(".card").find(".categories-show").slideToggle();

  if (this.innerHTML === '<i class="fa fa-caret-down"></i>') {
    this.innerHTML = '<i class="fa fa-caret-right"></i>';
  } else {
    this.innerHTML = '<i class="fa fa-caret-down"></i>';
  }
});

$(".subcategory_carat").click(function() {
  $(this).closest(".card").find(".subCategories-show").slideToggle();

  if (this.innerHTML === '<i class="fa fa-plus-circle"></i>') {
    this.innerHTML = '<i class="fa fa-minus-circle"></i>';
  } else {
    this.innerHTML = '<i class="fa fa-plus-circle"></i>';
  }
});

$(".table_carat").click(function() {
  $(this).closest(".card").find(".table-show").slideToggle();

  if (this.innerHTML === '<i class="fa fa-plus-circle"></i>') {
    this.innerHTML = '<i class="fa fa-minus-circle"></i>';
  } else {
    this.innerHTML = '<i class="fa fa-plus-circle"></i>';
  }
});

$(".table-show").on("show.bs.collapse", function() {
  alert("test");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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://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>
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="card mb-3">
        <div class="card-header justify-content-between d-flex align-items-center text-white bg-info">
          <h4>Wildlife</h4>
          <a class="category_carat"><i class="fa fa-caret-right"></i></a>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md order-2 order-md-1 mt-4 mt-md-0">
              <div class="collapse categories-show">
                <div class="row">
                  <div class="col-md order-2 order-md-1 mt-4 mt-md-0">
                    <h5 class="card-title"> <a href="#subCategories-show" class="subcategory_carat" data-toggle="collapse"><i class="fa fa-plus-circle"></i></a> Mammal Biodiversity</h5>
                  </div>
                </div>
                <div class="row ml-4">
                  <div class="col">
                    <div class="collapse subCategories-show">
                      <h5><a href="#table-show" class="table_carat" data-toggle="collapse"><i class="fa fa-plus-circle"></i></a> Brook Trout</h5>
                    </div>
                    <div class="collapse table-show">
                      something inside should be collapsed

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

bootstrap-4
0 Answers
Related