Bootstrap accordion not working in typescript

Question

I am trying to do an accordion using Bootstrap and for some reasons, whenever i click on the accordion, the toggle doesnt work. I directly pasted the codes from tutorial sites but its still not working, I have imported bootstrap and jquery and wondering what else I am missing.

This is my import

import {React, FormattedMessage, defaultMessages as jimuCoreDefaultMessage, AllWidgetProps, css, jsx, styled} from 'jimu-core';
 import {IMConfig} from '../config';
import { Tabs, Tab, Button} from 'jimu-ui';
import defaultMessages from './translations/default';
import {ProgressBar} from 'react-bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
import'./main.css';

import { render } from "react-dom";
import 'font-awesome/css/font-awesome.min.css';
import * as $ from 'jquery';

And this is my accordion code

<div class="container">
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">test</div>
</div>

I have been debugging for 2 days, it should be a 5 mins job and I am stuck and would appreciate some help. thanks in advance!

Answer 1

What version of Bootstrap and what version of jQuery do you use? Bootstrap 4.6.0 with jQuery 3.5.1 works well, but with jQuery 3.6.0 doesn't open dropdown menu for me. Maybe there is an error in jQuery 3.6.0 which causes similar problem with accordion like with dropdown menu.

Try to downgrade jQuery to version 3.5.1.