Dropdown menu not closing

[webcliq]

I am in the process of building a new site from scratch with Petal for the first time. I am at the wireframe / design stage. I am trying to create a menu bar out of buttons (extra vote for Nav component please).

When I click on the "caret" to instantiate the dropdown, there are no problems and the list appears but when I click on the "caret" again to hide the menu, it does not hide and the JS console displays an error:

Uncaught TypeError: can't access property "parentNode", dropdown_el is null

I have examined the source of your buttons in your Documentation and my code is a copy of that:

`

				<div class="btn-group">
					<!-- Home -->
					<button class="btn hollow whitetext navbtn" data-action="/" type="button">Home</button>
				</div>

				<!-- User not logged in -->
				<div class="btn-group">
					<button class="btn hollow whitetext" data-toggle="dropdown" id="usermenu">User&nbsp;<span class="caret"></span></button>
					<ul class="dropdown-menu whitetext" data-dropdown-align="right">
						<li><a href="#">Register</a></li>
						<li><a href="#">Login</a></li>
					</ul>
				</div>

				<div class="btn-group">
					<!-- User logged in -->
					<button class="btn hollow whitetext" data-toggle="dropdown" data-dropdown="membermenu">Member&nbsp;<span class="caret"></span></button>
					<ul class="dropdown-menu whitetext" id="membermenu" data-dropdown-align="right">
						<li><a href="#">Profile</a></li>
						<li><a href="#">Logout</a></li>
					</ul>
				</div>

			</div>
		</div>`

I have tried a few ideas (see in my code), but to no avail.

I could dive into your JS and probably fix it, but I am a bit confused why it works in your documentation but does not work on my system.

[zvuc]

It looks like you forgot to add the .dropdown class to the <button>. As laid out in the documentation, the .dropdown class and data-toggle="dropdown" attributes are both required for the closing to properly work. Can you try again and see how it goes?