Bootstrap open Accordion after Ajax loaded

Hamid Haghdoost - Jun 4 '22 - - Dev Community

Accordion is a nice component of Bootstrap. It uses 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 accordion header, then send an Ajax request and get the content of accordion and then open it. There was not a straigh-forward API or document for that and finally I find 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>
Enter fullscreen mode Exit fullscreen mode

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

. . . . . . . . . . .