DEV Community

Hamid Haghdoost
Hamid Haghdoost

Posted on

4 3

Bootstrap open Accordion after Ajax loaded

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.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay