I am actually facing some problems to get an bootstrap accordion working inside a dropdown menu.
I googled a lot and also find some StackOverflow threads here, but they are several years old and depending on bootstrap 3 or bootstrap 2.
Like this one here: Twitter Bootstrap: How to create a dropdown button with an accordion inside it?
Can anybody help me here or have a solution for a working accordion inside a bootstrap dropdown menu.
<nav class="navbar navbar-expand-md">
<ul class="navbar-nav">
<li class="nav-item mega-dropdown-menu">
<a class="nav-link" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Test</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria- controls="collapseExample">Accordion</a>
<div id="collapseExample" class="collapse">
<ul class="navbar-nav">
<li class="nav-link">
<a class="nav-link" href="#">Accordion Link 1</a>
</li>
<li class="nav-link">
<a class="nav-link" href="#">Accordion Link 2</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</li>
</ul>
</nav>
2
Answers
try this
The trick to keeping the Navbar dropdown open on click is to use a
<form>
tag. Therefore if you place the accordion inside a<form>
it will work as desired.Demo: https://www.codeply.com/go/F8iQy0MeLa