Agfdhyk

In the menu that you see in the jsfiddle https://jsfiddle.net/Adyyda/osnq30bg/, if i click on triangle from Item 2 (that has childrens), the childrens show.

If i click on triangle from Item 3, the childrens show.

The problem is that i do not manage to close the childrens from Item 1 which are already active. Tried all sort of solutions regarding toggle but in this particular case i miss something to make it happen?

<header class="main" id="siteheader">

    <a href="#menu" class="menu-link active"><span></span> Menu</a>

    <nav id="menu" class="menu">

        <ul class="level-1">

            <li><a href="">Item 1</a></li>

            <li><a href="">Item 2</a><span class="has-subnav">▼</span>

                <ul class="wide level-2">

                    <li><a href="">Child Item 1</a></li>

                    <li><a href="">Child Item 2</a></li>

                    <li><a href="">Child Item 3</a></li>

                </ul>

            </li>

            <li><a href="">Item 3</a><span class="has-subnav">▼</span>

                <ul class="level-2">

                    <li><a href="">Child Item 1</a></li>

                    <li><a href="">Child Item 2</a></li>

                </ul>

            </li>

            <li><a href="">Item 4</a></li>

            <li><a href="">Item 5</a></li>

        </ul>

    </nav>

</header>



// Multi-Toggle Navigation

$(function() {

    $('body').addClass('js');

        var $menu = $('#menu'),

            $menulink = $('.menu-link'),

            $menuTrigger = $('.has-subnav');



    $menulink.click(function(e) {

        e.preventDefault();

        $menulink.toggleClass('active');

        $menu.toggleClass('active');

    });



    $menuTrigger.click(function(e) {

        e.preventDefault();

        var $this = $(this);

        $this.toggleClass('active').next('ul').toggleClass('active');

    });



});



// Remove "Active" Class from Menu on Resize

$(window).resize(function() {

    var viewportWidth = $(window).width();

        if (viewportWidth > 925) {

            $("#menu").removeClass("active");

        }

});





a.menu-link {

  color: #000;

  display: block;

  text-decoration: none;

}



.menu-link span {

  border-bottom: solid 3px #000;

  border-top: double 10px #000;

  display: inline-block;

  height: 4px;

  margin: 0 5px -3px 0;

  width: 30px;

}



.menu-link:hover span { border-color: #666; }



.menu, .menu > ul, .menu > ul ul {

  clear: both;

  display: flex;

  flex-flow: column;

  margin: 0;

}



.menu.active {

  background: #f9f9f9;

  border-bottom: 1px solid #d8d8d8;

  border-top: 1px solid #d8d8d8;

  margin: 1em 0 1em -12px;

  max-height: 55em;

  width: 100vw;

}



.js .menu > ul ul.active {

  margin: 0;

  max-height: 55em;

  padding: 0;

}



.menu > ul { padding: 0; }



nav li {

  display: inline-block;

  margin: 0;

  position: relative;

}



.menu li a {

  color: #000;

  display: inline-block;

  font-size: 1.04em;

  letter-spacing: .05em;

  line-height: 2.5em;

  text-decoration: none;

}



span.has-subnav {

  display: block;

  font-size: 1em;

  line-height: 2.5em;

  position: absolute;

  right: 20px;

  padding: 0 0.5em;

  top: 0;

}

 @media screen and (max-width:800px) {



.menu,  .menu > ul ul {

  margin: 0;

  max-height: 0;

  overflow: hidden;

}



.menu li a {

  border-bottom: 1px solid #d8d8d8;

  display: block;

  padding-left: 15px;

}



.menu li li a { padding-left: 50px; }



.menu li:last-child a { border: none; }



.menu li li:last-child a { border-bottom: 1px solid #d8d8d8; }



.menu li:hover { background: #EDEDED; }

}

@media screen and (min-width: 801px) {



nav {

  border-top: 3px solid #00578b;

  border-bottom: 1px solid #a4d05e;

}



a.menu-link { display: none; }



.js .menu,  .js .menu > ul ul {

  max-height: none;

  overflow: visible;

}



.js .menu > ul li:hover > ul { display: flex; }



.menu ul {

  display: flex;

  flex-flow: row;

  height: 44px;

  justify-content: space-between;

  margin: 0;

  padding: 0;

}



.menu span.has-subnav { display: none; }



.menu li a:hover { color: rgb(164,208,94); }



.menu li li a:hover {

  background: rgba(164,208,94,0.1);

  color: #000;

}



.menu ul ul {

  background: #fff;

  border: solid 1px rgba(164,208,94,1);

  border-radius: 2px 2px 5px 5px;

  border-top: solid 2px transparent;

  display: none;

  height: auto;

  overflow: hidden;

  padding: 0;

  position: absolute;

  text-align: left;

  top: 43px;

  width: 150px;

  z-index: 999;

}



.chrome .js .menu > ul ul { top: 43px; }



.menu ul ul.wide { width: 300px; }



.menu ul ul li {

  border-bottom: solid 1px rgba(164,208,94,0.5);

  display: inline-block;

  position: relative;

}



.menu > ul ul li:last-child { border-bottom: none; }



.menu ul ul li a {

  display: block;

  padding-left: 10px;

}

}

There is nowhere in your $menuTrigger.click function where you "tell" others dropdowns to close, actually. You can do it by closing each opened one before opening the clicked one:

$menuTrigger.click(function(e) {

    e.preventDefault();

    $menuTrigger.each(function(){

        if($(this).hasClass('active')){

            $(this).removeClass('active').next('ul').removeClass('active');

        }

    });

    var $this = $(this);

    $this.toggleClass('active').next('ul').toggleClass('active');

});

see forked updated fiddle here