I have a site with the Bootstrap 4 theme. I want the collapseMenuManage
menu to automatically open when it is presented. Here 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> Menu principal
</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> Gérer votre compte
</a>
</div>
<div id="collapseMenuManage" class="collapse" aria-labelledby="headingMenuManage" data-parent="#accordionMenu">
...
</div>
</div>
</div>
</div>
</div>
</div>
I tested this JS code, but it doesn't work :
$('#modal_aside_first').on('.collapse', function () {
$(this).find("#collapseMenuManage .collapse").collapse("toggle");
});
The jQuery on
function is used to handle an event and .collapse
is a CSS selector, not and event. The correct event is show.bs.modal
as explained here. Secondly, the correct CSS selector is "#collapseMenuManage"
...
$('#modal_aside_first').on('show.bs.modal', function () {
$(this).find("#collapseMenuManage").collapse("toggle");
})