bootstrap collapse not working, element not hiding

Question

This is my code and I have tried many things around it.

$('#paired-results').on('show.bs.collapse', function () {

$('.callToAction').collapse('hide');
});

$('#paired-results').on('hide.bs.collapse', function () {
    $('.callToAction').collapse('show');
});

..................

<div id="callToAction" class="row px-2 px-sm-0 mt-4 partners collapse show">
            <form asp-controller="mycontroller" asp-action="myaction" method="post" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-begin="Mymethod">
                <div class="form-group">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <label for="email" class="font-weight-bold">Enter the Email address</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col text-danger" id="errormessage" name="errormessage">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="input-group mb-3">
                                    <input type="email" class="form-control rounded-card input font-weight-bold" id="email" name="email" placeholder="Enter Tidepool email" value="@Model.TidepoolEmailAddress" required>
                                </div>
                            </div>
                            <div class="col">
                                <button type="submit" class="btn btn-info tidepool-register-submit" data-toggle="collapse" data-target="#paired-results" aria-controls="errormessage">Link Account</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div id="paired-results" class="collapse">
            <div class="row px-2 px-sm-0 mt-4" id="Result">
                <div class="col-12 text-dark px-0">
                    <div class="w-100 p-3 m-0" id="message"></div>
                </div>
            </div>
        </div>

The idea is that when clicking on the button, it submits the form, if we get a success result the form should hide and show a message (the form is not hiding at the moment), but if we get an error, the form remains and there is also an error message.

Thanks

Answer 1

try this:

$('#paired-results').on('show.bs.collapse', function () {
    
    $('.callToAction').hide();
    });
    
    $('#paired-results').on('hide.bs.collapse', function () {
        $('.callToAction').show();
    });