Show and hide according to another event

Question

I have 2 show/hide buttons from 2 groups: group1 and Group2.When I click to open the group1, for example, it opens a card with information from that group and when I click hide it hides.

So far so good!

What I want is that when I click on the other group (Grupo2), instead of opening Grupo2 below what was already open(group1), I want to click it to close the group 1 to open the new.

<button type="button" class=" grupo1 btn-toggle btn waves-effect waves-light green" data-element="#grupo1">
                            Mostrar / Esconder
                        </button>

<button type="button" class=" grupo2 btn-toggle btn waves-effect waves-light green" data-element="#grupo2">
                            Mostrar / Esconder
                        </button>


<div class="grupos row">
    <div class="col s12 m6 l3" id="grupo1" style="display:none">
        <div class="card">
            <div class="card-content  green darken-2 white-text">
               </div>
 </div> </div> </div>

<div class="grupos row">
    <div class="col s12 m6 l3" id="grupo2" style="display:none">
        <div class="card">
            <div class="card-content  green darken-2 white-text">
               </div>
 </div> </div> </div>


// Função do button Mostrar/Esconder do card
    $(function(){
        $(".btn-toggle").click(function(e){
            e.preventDefault();
            el = $(this).data('element');
            $(el).toggle();


        });



    });

Answer 1

I added a class to the elements you show/hide. By clicking the button I hide all elements with .Hide() and then I only show what was clicked:

// Função do button Mostrar/Esconder do card
$(function(){
  $(".btn-toggle").click(function(e){
      e.preventDefault();
      $(".grupo").hide(); //Oculta todos elemento com classe grupo
      
      el = $(this).data('element');
      $(el).toggle(); //Exibe o elemento clicado.
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="grupo1 btn-toggle btn waves-effect waves-light green" data-element="#grupo1">
    Mostrar / Esconder
</button>

<button type="button" class="btn-toggle btn waves-effect waves-light green" data-element="#grupo2">
    Mostrar / Esconder
</button>

<div class="grupos row">
  <div class="col s12 m6 l3 grupo" id="grupo1" style="display:none">
    <div class="card">
      <div class="card-content  green darken-2 white-text">
      Grupo 1
      </div>
    </div>
  </div>
</div>

<div class="grupos row">
  <div class="col s12 m6 l3 grupo" id="grupo2" style="display:none">
    <div class="card">
      <div class="card-content  green darken-2 white-text">
      Grupo 2
      </div>
    </div>
  </div>
</div>

Answer 2

   $(document).ready(function(){
        var bt1 = $('#bt1'), //seleciona botão 1
            bt2 = $('#bt2'); //seleciona botão 2
       bt1.click(function(){  //define o display de acordo com o botão clicado
         $('#grupo1').css('display','block');
         $('#grupo2').css('display','none');
         
       })
       bt2.click(function(){ //define o display de acordo com o botao clicado
         $('#grupo2').css('display','block');
         $('#grupo1').css('display','none');
         
       })
  });

<button type="button" id="bt1" class=" grupo1 btn-toggle btn waves-effect waves-light green" data-element="#grupo1">
                            Mostrar / Esconder
                        </button>

<button type="button" id="bt2" class=" grupo2 btn-toggle btn waves-effect waves-light green" data-element="#grupo2">
                            Mostrar / Esconder
                        </button>


<div class="grupos row">
    <div class="col s12 m6 l3" id="grupo1" style="display:none">
        <div class="card">
            <div class="card-content  green darken-2 white-text">
            Botão 1 pressionado e conteúdo do grupo 2 oculto!
               </div>
 </div> </div> </div>

<div class="grupos row">
    <div class="col s12 m6 l3" id="grupo2" style="display:none">
        <div class="card">
            <div class="card-content  green darken-2 white-text">
             Botão 2 pressionado e conteúdo do grupo 1 oculto!
               </div>
 </div> </div> </div>
 <script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>

Test it and see if it’s what you need!