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.

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay