I am using the Bootstrap 4 theme on my website. I would like the menu called collapseMenuManage to automatically open when it is displayed. Below is the HTML code for my page:
<div id="modal_aside_first" class="modal fixed-right pl-0 fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-aside" role="document">
<div class="modal-content">
<div class="modal-body d-flex flex-column">
<div class="accordion list-group mb-0" id="accordionMenu">
<div id="headingMenuMain">
<a class="list-group-item list-group-item-action border-0 pl-2" data-toggle="collapse" href="#collapseMenuMain" aria-expanded="true" aria-controls="collapseMenuMain">
<i class="bi bi-plus-circle bi-lg"></i> Main Menu
</a>
</div>
<div id="collapseMenuMain" class="collapse show" aria-labelledby="headingMenuMain" data-parent="#accordionMenu">
...
</div>
<div id="headingMenuManage">
<a class="list-group-item list-group-item-action border-0 pl-2" data-toggle="collapse" href="#collapseMenuManage" aria-expanded="false" aria-controls="collapseMenuManage">
<i class="bi bi-plus-circle bi-lg"></i> Manage Your Account
</a>
</div>
<div id="collapseMenuManage" class="collapse" aria-labelledby="headingMenuManage" data-parent="#accordionMenu">
...
</div>
</div>
</div>
</div>
</div>
</div>
I tried this JavaScript code, but it did not have the desired effect:
$('#modal_aside_first').on('.collapse', function () {
$(this).find("#collapseMenuManage .collapse").collapse("toggle");
});