Search code examples
javascripthtmlbootstrap-4dropdown

How in dropdown menu add collapse submenu?

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>

Solution

  • 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>