Search code examples
javascripttwitter-bootstrapbootstrap-4accordion

How to open a "collapse" menu automatically?


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");
  });

Solution

  • 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");
    })
    

    Demo