open one modal and close the other

Question

I have two modals, only I’m not getting one to close automatically when the other one is opened, what I’ve got so far is to do this

CSS

.mr{
  position: fixed;
  top: 0px;
  left: -15%;
  background-color: #fff;
  padding: 1% 1%;
  width: 15%;
  height: 100vh;
  transition: .3s;
  z-index: 9999;
  box-shadow: 0 0 15px #ccc;
}
.show{left: 0px;}

HTML

<a href="javascript:void(0)" class="btGeneros"><i class="fas fa-folder-open"></i></a>

<button class="btFiltro"><span></span></button>

<div class="menuG mr">
    <div class="subMenu">
      01
    </div>
</div>

<div class="menuF mr">
    <div class="subMenu">
      02
    </div>
</div>

JQUERY

$(document).ready(function(){
    $('.btFiltro').click(function(){
      $('.menuF').toggleClass('show');
      $('.btFiltro').toggleClass('toggle');
      $('.btFiltro').toggleClass('black');
    })
    $('.btGeneros').click(function(){
      $('.menuG').toggleClass('show');
      $('.btGeneros').toggleClass('toggle');
      $('.btGeneros').toggleClass('black');
    })
})

when modal 01 has opened, I click to open to 02, 01 has to close automatically, and vice versa

Answer 1

Have to use .removeClass() to remove the class that shows the menu. Class controls are also missing .black buttons. And have wrong dials too.

It should be like this:

$(document).ready(function(){
    $('.btFiltro').click(function(){
      $('.menuG').removeClass('show');
      $('.menuF').toggleClass('show');
      $('.btFiltro').toggleClass('black');
      $('.btGeneros').removeClass('black');
    })
    $('.btGeneros').click(function(){
      $('.menuF').removeClass('show');
      $('.menuG').toggleClass('show');
      $('.btGeneros').toggleClass('black');
      $('.btFiltro').removeClass('black');
    })
})

.mr{
  position: fixed;
  top: 0px;
  left: -15%;
  background-color: #fff;
  padding: 1% 1%;
  width: 15%;
  height: 100vh;
  transition: .3s;
  z-index: 9999;
  box-shadow: 0 0 15px #ccc;
}
.show{left: 0px;}
.black{
   background: black;
   color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menuG mr">
    <div class="subMenu">menuG</div>
</div>

<div class="menuF mr">
    <div class="subMenu">menuF</div>
</div>
<div style="text-align: right;">
   <button class="btFiltro">filtro</button>
   <button class="btGeneros">generos</button>
</div>