Bootstrap v4.1 - Collapse does not work correctly

Question

Follows code:

$('#collapseDescricao').on('hidden.bs.collapse', function () {
   $('[data-target="#collapseDescricao"]').text("Mostrar descrição");
});
$('#collapseDescricao').on('shown.bs.collapse', function () {
   $('[data-target="#collapseDescricao"]').text("Ocultar descrição");
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="card">
    <div class="card-header">
        <div class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseDescricao" aria-expanded="true" aria-controls="collapseOne">
                Mostrar descrição
            </button>
        </div>
    </div>
    <div id="collapseDescricao" class="collapse">
        <div class="card-body">
            <button style="margin-bottom: 15px;" class="btn btn-outline-danger" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false">Botão vermelho <i class="fas fa-thumbs-down"></i></button>

            <div class="collapse multi-collapse" id="multiCollapseExample1" style="margin-bottom: 15px;">
                <div class="card">
                    <div class="card-body">
                        <p class="card-text">bla blab bla balbalbalba</p>
                        <p class="card-text"><small class="text-muted">Última atualização: 28/05/2018</small></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Or if you prefer Jsfiddle: https://jsfiddle.net/x7g1xoq1/

The problem is in the red button, when I click on it, it changes the title. The red button cannot change the title. The red button only serves to expand "collpase" and does not change title. You can only change the title when you click #collapseDescricao and not #multiCollapseExample1.

Some solution ?

Answer 1

The problem is that the event 'shown.bs.collapse' that you are working on is propagating. That is, the event that occurs on Collapse internal will propagate by the parent elements and, consequently, by the element #collapseDescricao, running the title change code again. In this case, one way would be to verify who was the original event target with event.target.id and change the title only if it was the #collapseDescricao.

$('#collapseDescricao').on('shown.bs.collapse', function (event) {
  if (event.target.id == "collapseDescricao") {
    $('[data-target="#collapseDescricao"]').text("Ocultar descrição");
  }
});

Behold:

$('#collapseDescricao').on('hidden.bs.collapse', function(event) {
  if (event.target.id == 'collapseDescricao') {
    $('[data-target="#collapseDescricao"]').text("Mostrar descrição");
  }
});
$('#collapseDescricao').on('shown.bs.collapse', function(event) {
  if (event.target.id == 'collapseDescricao') {
    $('[data-target="#collapseDescricao"]').text("Ocultar descrição");
  }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="card">
  <div class="card-header">
    <div class="mb-0">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseDescricao" aria-expanded="true" aria-controls="collapseOne">
                Mostrar descrição
            </button>
    </div>
  </div>
  <div id="collapseDescricao" class="collapse">
    <div class="card-body">
      <button style="margin-bottom: 15px;" class="btn btn-outline-danger" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false">Botão vermelho <i class="fas fa-thumbs-down"></i></button>

      <div class="collapse multi-collapse" id="multiCollapseExample1" style="margin-bottom: 15px;">
        <div class="card">
          <div class="card-body">
            <p class="card-text">bla blab bla balbalbalba</p>
            <p class="card-text"><small class="text-muted">Última atualização: 28/05/2018</small></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>