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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

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

Okay