JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<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>

JavaScript

$('#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");
    });