Currently, my code is almost perfect, but there is a slight issue with allowing multiple sub-navs to be open at the same time. I want to ensure that when one sub-nav is opened, any others automatically close.
Essentially, in the jQuery code below, I need to modify it so that if a new sub-nav is clicked on, any other open ones will close. Currently, it only closes the same sub-nav if clicked again.
HTML
<nav class="st-menu" id="menu-4a">
<ul>
<li>
<a href="#">Guidance Manual</a>
</li>
<li>
<a href="#">Resource Directory</a><div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
<ul class="reg-subnav">
<li><a href="#">Stormwater Plan Review Resources</a></li>
<li><a href="#">Pilot Projects</a></li>
<li><a href="#">Proprietary Products</a></li>
<li><a href="#">Additional Resources</a></li>
</ul>
</li>
<li>
<a href="#">Stormwater 101</a><div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
<ul class="reg-subnav">
<li><a href="#">Regulations</a></li>
<li><a href="#">Stormwater Management</a></li>
<li><a href="#">Stormwater Billing & Retrofits</a></li>
<li><a href="#">Green City, Clean Waters</a></li>
</ul>
</li>
<li>
<a href="#">Contact Us</a><div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
<ul class="reg-subnav">
<li><a href="#">About Us</a></li>
<li><a href="#">Development Review Contacts</a></li>
</ul>
</li>
</ul>
</nav>
jQuery
$(".toggle-arrow").click(function(){
$(this).closest('li').find(".reg-subnav").toggleClass('open-sub');
$(this).closest('li').find('.arrow-image').toggleClass("flip");
});