Expected behavior

The event should be triggered only in the target collapse component, not in its parent elements.

Actual behavior

All *.mdb.collapse events (show, hide, shown, and hidden) are propagated up the DOM, even if no data-mdb-target is defined.

Resources (screenshots, code snippets etc.)

https://jsfiddle.net/8fj74mpu/25/

// Even when filtering by the event target, the invoked event cannot be isolated to the correct accordion; it always propagates up the DOM.

$('.accordion-collapse').on('show.mdb.collapse', function (e) {
   if (e.target === this) {
      console.log('show: ', $(e.currentTarget).attr('id'));
   } 
});

DOM:

<!-- Nested accordion example -->
<div class="accordion" id="level_1">
  <div class="accordion-item">
    <h2 class="accordion-header" id="level_1_menu_1">
      <button
        data-mdb-collapse-init
        class="accordion-button collapsed"
        type="button"
        data-mdb-target="#level_1_collapse_1"
      >
        Menu #1
      </button>
    </h2>
    <div id="level_1_collapse_1" class="accordion-collapse collapse">
      <div class="accordion-body">

        <!-- Nest another accordion -->
        <div class="accordion" id="level_2">
          <div class="accordion-item">
            <h2 class="accordion-header" id="level_2_menu_1">
              <button
                data-mdb-collapse-init
                class="accordion-button collapsed"
                type="button"
                data-mdb-target="#level_2_collapse_1"
              >
                Submenu #1.1
              </button>
            </h2>
            <div id="level_2_collapse_1" class="accordion-collapse collapse">
              <div class="accordion-body">Content 1.1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>