How to change button name when opening/closing accordion?

Question

JavaScript

<?php if (Db::$count_sql): ?>
    <button class="font-weight-bold text-success" data-toggle="collapse" data-target="#query">
        Открыть запросы
    </button>
    <div class="collapse" id="query">
        <div class="text-primary">
            <ol class="m-0">
                <?php foreach (Db::$queries as $query): ?>
                    <li><?= $query ?></li>
                <?php endforeach; ?>
            </ol>
        </div>
    </div>
<?php endif; ?>

at the moment, the button opens and closes the accordion, but its name is naturally unchanged, like when the accordion is open, change the name to [Close Requests]?

Answer 1

$('#query').on('shown.bs.collapse', function () {
    $('<button data-target="#query"'>).text('Закрыть запросы')
})
$('#query').on('hidden.bs.collapse', function () {
    $('<button data-target="#query"'>).text('Открыть запросы')
})