How in dropdown menu add collapse submenu?

Question

how to add collapse menu in dropdown menu? When you click on the menu item collapse, dropdown menu closed. When you reopen the dropdown menu, the collapse works.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown">
 <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
  aria-haspopup="true" aria-expanded="false">
  Dropdown link
 </a>

 <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
  <a class="dropdown-item dropdown-toggle" data-toggle="collapse" href="#collapse" aria-expanded="false"
   aria-controls="collapse" title="Description">Description
  </a>
  <div class="collapse" id="collapse">
   <a class="dropdown-item" href="" title="Description">Description</a>
   <a class="dropdown-item" href="" title="Description">Description</a>
   <a class="dropdown-item" href="" title="Description">Description</a>
   <a class="dropdown-item" href="" title="Description">Description</a>
  </div>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
 </div>
</div>

Possibly duplicated. Check [bootstrap 4 multilevel dropdown](https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation) — awran5, Feb 28 '19 at 11:06
This is not exactly what I need. I have a main menu, dropdown. — Jekis, Feb 28 '19 at 12:22

awran5 · Accepted Answer · 2019-03-04T18:50:42.970

You will need a bit of jquery to achieve that:

Update: Toggle aria-expanded attribute

$( document ).ready( function () {
    var dropToggle = $('.dropdown-menu > .dropdown-toggle');             
    // Click event
    dropToggle.click(function(e) {
        // Prevents the event from bubbling up the DOM
        e.stopPropagation();

        // New var 'expanded' to the check the 'aria-expanded' attribute
        var expanded = $(this).attr('aria-expanded');
        //  Inline if to set 'aria-expanded' to true if it was false
        $(this).attr('aria-expanded', expanded === 'false' ? 'true' : 'false');
        // Show the next element which is your dropdown menu 
        $(this).next().toggleClass('show');
    });
});

Example:

$(document).ready(function() {
  var dropToggle = $('.dropdown-menu > .dropdown-toggle');
  // Click event
  dropToggle.click(function(e) {
    // Prevents the event from bubbling up the DOM
    e.stopPropagation();

    // New var 'expanded' to the check the 'aria-expanded' attribute
    var expanded = $(this).attr('aria-expanded');
    //  Inline if to set 'aria-expanded' to true if it was false
    $(this).attr('aria-expanded', expanded === 'false' ? 'true' : 'false');
    // Show the next element which is your dropdown menu 
    $(this).next().toggleClass('show');
  });
});

a.dropdown-toggle[aria-expanded="false"]::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}
a.dropdown-toggle[aria-expanded="true"]::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: 0;
  border-right: .3em solid transparent;
  border-bottom: .3em solid;
  border-left: .3em solid transparent;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true">Dropdown link</a>

  <div class="dropdown-menu">
    <a class="dropdown-item dropdown-toggle" data-toggle="collapse" href="#collapse" aria-expanded="false" aria-controls="collapse" title="Description">Description</a>
    <div class="collapse" id="collapse">
      <a class="dropdown-item" href="" title="Description">Description</a>
      <a class="dropdown-item" href="" title="Description">Description</a>
      <a class="dropdown-item" href="" title="Description">Description</a>
      <a class="dropdown-item" href="" title="Description">Description</a>
    </div>
    <a class="dropdown-item dropdown-toggle" data-toggle="collapse" href="#collapse" aria-expanded="false" aria-controls="collapse1" title="Description">Description</a>
    <div class="collapse" id="collapse1">
      <a class="dropdown-item" href="" title="Description">Description</a>
      <a class="dropdown-item" href="" title="Description">Description</a>
      <a class="dropdown-item" href="" title="Description">Description</a>
      <a class="dropdown-item" href="" title="Description">Description</a>
    </div>
    <a class="dropdown-item dropdown-toggle" data-toggle="collapse" href="#collapse" aria-expanded="false" aria-controls="collapse2" title="Description">Description</a>
    <div class="collapse" id="collapse2">
      <a class="dropdown-item" href="" title="Description">Description</a>
      <a class="dropdown-item" href="" title="Description">Description</a>
      <a class="dropdown-item" href="" title="Description">Description</a>
      <a class="dropdown-item" href="" title="Description">Description</a>
    </div>
  </div>
</div>

Please note that if you opened all the collapsed menus at the same time, sometimes the dropdown menu it self will jump out of its position which caused by popper.js auto placement. If you like to fix that, just add data-display="static" attribute to the first link that have data-toggle="dropdown" like in your case:

<a class="btn btn-secondary dropdown-toggle" data-display="static" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true">Dropdown link</a>

Yes, this is what you need, but how to add aria-expanded = "false" when toggleClass ("collapse")? — Jekis, Mar 04 '19 at 07:04
@Jekis I've updated the code to add the `aria-expanded` toggle, added some comments to show how it works. — awran5, Mar 04 '19 at 08:34
When I added a few collapse menus, when clicking on them, the dropdown-toggle arrow does not work correctly. — Jekis, Mar 04 '19 at 14:01
@Jekis Updated again, I guess it works ok now please check it. — awran5, Mar 04 '19 at 18:53
Hi there, sorry, i didn't understand, you mean `href="#collapse"` ? you can delete it, bootstrap uses `aria-controls` attribute to select the ID to open it. like so: `aria-controls="collapse1"` will target `id="collapse1"` — awran5, Mar 27 '19 at 09:21
No, I meant to remove the anchor and all that comes after it. (href="http://www.example.com/#collapse") -> (href="http://www.example.com/") — Jekis, Mar 27 '19 at 12:46
Yes, that was my point. just remove the whole `href="#collapse"` from all `dropdown-toggle` links then manually remove the `#collaose` from your `"example.com/#collapse")` link because it will be saved, refresh the page. Example [here](https://codepen.io/awran5/pen/RdzPgM) — awran5, Mar 27 '19 at 14:39

How in dropdown menu add collapse submenu?

1 Answers1