Bootstrap v4.1 - Collapse does not work correctly

Navigation
0

Follow the code below: 

$('#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><scriptsrc="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><divclass="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: link

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

Any solution?

    
asked by anonymous 28.05.2018 / 22:05

1 answer

2

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

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

See: 

$('#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><scriptsrc="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><divclass="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>
    
28.05.2018 / 22:31
Error removing div with Jquery How to pass structure data to a text file?