Show and hide according to another event

Navigation
0

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

So far so good!

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

<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();


        });



    });
    
asked by anonymous 05.02.2018 / 19:09

2 answers

1

I've added a class to the elements that you show / hide. By clicking the button I hide all elements with .hide () and then just display 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><buttontype="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>
    
05.02.2018 / 19:23
0

   $(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 and see if that's what you need!

    
05.02.2018 / 19:19
How to work with Arrays using Angular 5 in the console log? Field file with Jquery