Bootstrap dropdowns inside a dropdown

Question

I have a series of Bootstrap dropdown functions that display lists of countries for each continent, U.S. states, etc. They look like this:

<nav class="dropdown Canada" style="margin-top: 5px;">
  <button class="btn dropdown-toggle" type="button" id="dropdownCanada" data-toggle="dropdown" aria-expanded="true" style="width: 100%; background: #f00; color: #fff;"> <b>Canada</b> </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownCanada">
    <?php
echo join( $Provinces, '' );
?>
  </ul>
</nav>

<nav class="dropdown States" style="margin-top: 5px;">
  <button class="btn dropdown-toggle" type="button" id="dropdownStates" data-toggle="dropdown" aria-expanded="true" style="width: 100%; color: #fff;"> <b>United States</b> </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownStates">
    <?php
echo join( $States, '' );
?>
  </ul>
</nav>

They work fine, but I'd like to put all the country lists inside a dropdown and all the lists of states, provinces, etc. inside another drop down. So when you click a button labeled "Countries," it displays buttons labeled "North America," "Africa," etc. The user would then click North America to see a list of all countries in North America.

But when I put all my drop down buttons inside a similar dropdown button, it only works halfway. When I click on "Countries," it displays a list of buttons, but nothing happens when I click one of these buttons.

Can someone show me how to do this correctly? Or is this something that can't be done with Bootstrap? If there's a better way to do it, that works for me. ;)

I am not sure I understood your problem correctly, but this is what you are looking for? : http://stackoverflow.com/questions/9758587/twitter-bootstrap-multilevel-dropdown-menu — Andrew Adam, Mar 31 '16 at 01:13
If a user clicks a button labeled "Countries," a dropdown list appears featuring buttons labeled "North America," "Africa," etc. A user can then click on any of those buttons and it will in turn display a list of countries in North America, Africa, etc. The link you provided may well be the answer. I'll play with it and see if I can make it work with dropdown buttons, rather than simple links. Thx. — , Mar 31 '16 at 01:19
I hope it will help you out, if not then let us know and we will find another way to go. — Andrew Adam, Mar 31 '16 at 01:21
@ Andrew Adam - If you care to post your comment as an answer, I'll choose it as the correct answer. I also discovered that I can make it work by using AJAX, rather than Bootstrap, to power the inner button. — , Apr 03 '16 at 03:42

Bootstrap dropdowns inside a dropdown

0 Answers0