Don't allow both menus with same class to be open at the same time

Question

I don't want the both menus to be able to be open at the same time. What I want: If one menu is open and you click the next one the first one will close. I include my jsfiddle so you can get a better understanding of what I am looking for, jQuery 2.1 is enabled.

Take a look here: https://jsfiddle.net/blomberg/y0bxL2sL/1/

 $(document).ready(function() { $.fn.dropDown = function(hiddenClass) { var that = this; $('html').click(function() { that.each(function() { $(this).find('.smaller_ul_list').addClass(hiddenClass); }); }); return this.each(function() { var $this = $(this); $this.data('desktop__menuTrigger', true); $this.find('.smaller_ul_list').addClass(hiddenClass); $this.click(function(e) { $(this).find('.smaller_ul_list').toggleClass(hiddenClass); e.stopPropagation(); if ($(e.target).parent().data('desktop__menuTrigger')) { e.preventDefault(); } }); }); } $('.desktop__menu').dropDown('hidden'); }); 

 .main-hamburger-menu { display: block; width: 28px; float: left; height: 100%; margin-left: 14px; } /* DESKTOP MENU */ .hidden { display: none } .desktop__menu { .bigger_ul_list { .smaller_ul_list { width: 200px; border: 2px solid gray; border-bottom: none; /* height: 350px; */ background: gray; /* overflow-y: scroll; */ margin-top: -20px; /* border-radius: 8px; */ li { clear: both; height: 47px; border-bottom: 2px solid gray; line-height: 47px; letter-spacing: .3px; padding-right: 15px; text-transform: uppercase; font-size: 15px; font-weight: 700; &: hover { background: #fff; } } li:first-child { border-radius: 8px 8px 0 0; } img { width: 30px; } a { color: gray; text-decoration: none; li { border-bottom: 2px solid gray; line-height: 47px; letter-spacing: .3px; padding-right: 15px; text-transform: uppercase; font-size: 15px; color: black; &: hover { background: #fff; } } } } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="main-hamburger-menu"> <div class="desktop__menu"> <ul class="bigger_ul_list"> <li class="dropdown__desktop"><a href="javascript:void(0);">Click me</a> <ul class="smaller_ul_list"> <li>test</li> </ul> </li> </ul> </div> </div> <br> <br> <br> <div class="main-hamburger-menu"> <div class="desktop__menu"> <ul class="bigger_ul_list"> <li class="dropdown__desktop"><a href="javascript:void(0);">Click me</a> <ul class="smaller_ul_list"> <li>test</li> </ul> </li> </ul> </div> </div> 

Answer 1

You can achieve this by hiding all other .smaller_ul_list elements when toggling the intended one. Try this:

$this.click(function(e) {
    var $smallerUlList = $(this).find('.smaller_ul_list').toggleClass(hiddenClass);
    $('.smaller_ul_list').not($smallerUlList).addClass(hiddenClass);
    e.stopPropagation();
    if ($(e.target).parent().data('desktop__menuTrigger')) {
        e.preventDefault();
    }
});

Updated fiddle