When all other search results have failed to solve my issue, I resort to posting my own question.
My problem involves opening hidden submenus in a website's main menu. However, when I open multiple submenus, they just stack above each other. Ideally, I want only one submenu to be open at a time, meaning that when I open a new one, the previously opened one should close.
jQuery(document).ready(function($) {
$(".clickSlide > ul").hide();
$(".clickSlide").click(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
});<ul id="menu-sidhuvud-e-butik-vanster" class="menu">
<li class="clickSlide menu-item menu-item-has-children"><a>Parent 1</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
<ul class="sub-menu">
<li class="menu-item-1948"><a href="#">Link object</a></li>
<li class="menu-item-2224"><a href="#">Link object</a></li>
</ul>
</li>
</ul>
</li>
<li class="clickSlide menu-item menu-item-has-children"><a>Parent 3</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
<ul class="sub-menu">
<li class="menu-item-1948"><a href="#">Link object</a></li>
<li class="menu-item-2224"><a href="#">Link object</a></li>
</ul>
</li>
</ul>
</li>
<li class="clickSlide menu-item menu-item-has-children"><a>Parent</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
<ul class="sub-menu">
<li class="menu-item-1948"><a href="#">Link object</a></li>
<li class="menu-item-2224"><a href="#">Link object</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Does anyone have any suggestions? I am quite new to JS and would appreciate any guidance.
Thank you for your help!