title: Close menu when clicking the screen or another button
body: <p>I have two vertical menus and two buttons. Each menu only opens and closes if you click its button. </p>
  
  <p>But I would like that by clicking on the "<code>showLeft</code>" button the "<code>showRight</code>" menu will be hidden.</p>
  
  <p>And if I click anywhere on the monitor the two menus close</p>
  
  <pre><code>&lt;button id="showLeft"&gt;Show/Hide Left Slide Menu&lt;/button&gt;
  &lt;button id="showRight"&gt;Show/Hide Right Slide Menu&lt;/button&gt;
  
  &lt;script&gt;
      var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
          menuRight = document.getElementById( 'cbp-spmenu-s2' ),
          body = document.body;
  
      showLeft.onclick = function() {
          classie.toggle( this, 'active' );
          classie.toggle( menuLeft, 'cbp-spmenu-open' );
          disableOther( 'showLeft' );
  
      };
      showRight.onclick = function() {
          classie.toggle( this, 'active' );
          classie.toggle( menuRight, 'cbp-spmenu-open' );
          disableOther( 'showRight' );
      };
  
  
      function disableOther( button ) {
          if( button !== 'showLeft' ) {
              classie.toggle( showLeft, 'disabled' );
          }
          if( button !== 'showRight' ) {
              classie.toggle( showRight, 'disabled' );
          }
      }           
  
      var topNavBar = 50;
      var footer = 48;
      var height = $(window).height();
      $('.cbp-spmenu').css('height', (height - (topNavBar+footer)));
  
      $(window).resize(function(){
          var height = $(window).height();
          $('.cbp-spmenu').css('height', (height - (topNavBar+footer)));
      });
  
  
  &lt;/script&gt;
  </code></pre>