Bootstrap open Accordion after Ajax loaded

Accordion is a nice component of Bootstrap. It uses the Collapse feature of Bootstrap. It works properly under the hood, but sometimes you need to do something different. In my case, I needed to click on the accordion header, then send an Ajax request to get the content of the accordion, and then open it. There was not a straightforward API or documentation for that, and finally I found it.

<script>
    let prevent = true;

    $("#collapseThree").on("show.bs.collapse", function (e) {
        if (prevent) {
            e.preventDefault();
        }
        setTimeout(function () {
            prevent = false;
            $("#collapseThree").collapse("show");
            prevent = true;
        }, 1000);
    });
</script>

In this example, I’ve added an event listener on the open state of collapse and I’ve used a setTimeout function to simulate an Ajax request.