Don't allow both menus with same class to be open at the same time
<p>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. </p>

<p>Take a look here: 
<a href="https://jsfiddle.net/blomberg/y0bxL2sL/1/" rel="nofollow">https://jsfiddle.net/blomberg/y0bxL2sL/1/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
        &amp;: 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;
          &amp;: hover {
            background: #fff;
          }
        }
      }
    }
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="main-hamburger-menu"&gt;
  &lt;div class="desktop__menu"&gt;
    &lt;ul class="bigger_ul_list"&gt;
      &lt;li class="dropdown__desktop"&gt;&lt;a href="javascript:void(0);"&gt;Click me&lt;/a&gt;
        &lt;ul class="smaller_ul_list"&gt;
          &lt;li&gt;test&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;br&gt;
&lt;br&gt;
&lt;br&gt;

&lt;div class="main-hamburger-menu"&gt;
  &lt;div class="desktop__menu"&gt;
    &lt;ul class="bigger_ul_list"&gt;
      &lt;li class="dropdown__desktop"&gt;&lt;a href="javascript:void(0);"&gt;Click me&lt;/a&gt;
        &lt;ul class="smaller_ul_list"&gt;
          &lt;li&gt;test&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>