open a modal and close the other

Question

open a modal and close the other

Navigation

#1 by (2 votes)

1

I have two modalities, so I can not automatically close it when the other one is opened, what I got up to now was 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 mode 01 has opened, I click to open the 02, the 01 has to close automatically, and vice versa

jquery

asked by anonymous 08.11.2018 / 20:59

1 answer

Add column table with javascript and condition InFix to Postfix Conversion

score 2 · Accepted Answer

You must use .removeClass() to remove the class that displays the menu. Also missing the controls of class .black of buttons. And it has wrong selectors too.

It should look 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><divclass="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>