How to close all other submenus?

Question

I have a navbar with a fullscreen dropdown menu. onClick I want to open a dropdown menu and if another dropdown is already open I want to close the other menu's.

Here is a bit of my code:

Javascript:

$(".sub-link").click(function(){
   $(this).children(".navigation-container, a, .navigation-overlay").toggleClass("active");
   $(this).children(".navigation-container, .navigation-overlay").fadeToggle(250);
});

Html:

<!-- BEGIN NAVIGATION -->
<section class="navbar">
    <div class="navbar-logo">
        <img src="assets/img/Logo.png">
    </div>
    <div class="navbar-menu-container">
        <div class="navigation-overlay"></div>
        <ul class="navbar-menu">
            <a href="#"><li>Home</li></a>
            <a href="#"><li>Voor de kinderen</li></a>
            <a href="#"><li>Voor de ouders</li></a>
            <a href="#" class="active"><li class="sub-link">Over de school
                            <!-- Sub-Menu -->
                            <div class="navigation-container">
                                <div class="sub-menu-title">Over de school</div>
                                <div class="sub-item-container">

                                    <ul>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Onze school in beeld</li></a>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Teamfoto</li></a>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Even voorstellen</li></a>
                                    </ul>

                                    <ul>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Onze school in beeld</li></a>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Teamfoto</li></a>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Even voorstellen</li></a>
                                    </ul>

                                    <ul>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Onze school in beeld</li></a>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Teamfoto</li></a>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Even voorstellen</li></a>
                                    </ul>

                                </div>
                            </div>
                            <!-- END Sub-Menu -->
                        </li></a>
            <a href="#"><li>Fotogalerij</li></a>
            <a href="#"><li>Nieuws</li></a>
            <a href="#"><li>Contact</li></a>
            <a href="#"><li class="navbar-search"><img src="assets/img/Search.png"></li></a>
        </ul>

    </div>
    <div class="hamburger-menu">
        <div id="hamburger1"></div>
        <div id="hamburger2"></div>
        <div id="hamburger3"></div>
    </div>
</section>
<!-- END NAVIGATION -->

I already tried some thing with siblings() and .not(this) but I can't get it to work.

Thanks!

Answer 1

You only need to toggle .navigation-container and use css to set .navigation-container{display:none} but .navigation-container.active{display:inline}

$(".sub-link").click(function(){
       $(this).children(".navigation-container").toggleClass("active");

    });

See fiddle here: https://jsfiddle.net/xn0t4b9f/1/

To do the fading just change the JQuery a bit:

$(".sub-link").click(function(){
$(".navigation-container").removeClass("active");
$(this).children(".navigation-container").fadeToggle("active");
});

Answer 2

Did you tried remove all .active before toggleClass?

$(".sub-link").click(function(){
   $(this).children(".navigation-container.active, 
                      a.active, 
                     .navigation-overlay.active").removeClass("active");
   $(this).children(".navigation-container, a, .navigation-overlay").toggleClass("active");
   $(this).children(".navigation-container, .navigation-overlay").fadeToggle(250);
});