0

Galera, eu to com um problema de Jquery, JS Eu tenho um conjunto de botões com as iniciais de cada nome, eu gostaria de fazê-los aparecer com suas divs ao clicar e quando clicasse em outro sumisse o anterior e aparecesse somente o outro, eu já consegui fazer com que apareça ao clicar, porém ele vai aparecendo conforme eu vou clicando nos outros

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  @foreach($letras as $letra)
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button data-letra="{{$letra->letra}}" type="button" class="btn btn-secondary showDiv">{{$letra->letra}}</button>
  </div>
  @endforeach
</div>


  @foreach($exames as $key => $exame)
  <div class="list-group space" style="display: none" id="{{$key}}">
    @foreach($exame as $exameAux)
      <div id="accordion" role="tablist" aria-multiselectable="true">
        <div class="card">
          <div style="background-color:#f7f7f9 !important" class="card-header" role="tab" id="headingOne">
            <h5 class="mb-0">
              <a class="collapse-icon" data-toggle="collapse" data-parent="#accordion" href="#{{ $exameAux->id }}" aria-expanded="true" aria-controls="collapseOne">
                <i style="color:#0a5f55;" class="fa fa-plus"></i>
                &nbsp;{{ $exameAux->exame }}
              </a>
            </h5>
          </div>
          <div id="{{ $exameAux->id }}" class="collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="card-body">
              <p><strong>Material</strong>: {{ $exameAux->material }}</p>
              <p><strong>Tempo em Jejum</strong>: {{ $exameAux->tempo_jejum }}</p>
              <p><strong>Observações</strong>: {{ $exameAux->obs }}</p>
            </div>
          </div>
        </div>
      </div>
    @endforeach
  </div>
  @endforeach

JS dele está assim

<script type="text/javascript">
$(".showDiv").click(function(){
    var letra = $(this).data('letra');
    $("#" + letra).fadeIn();
  });

</script>

1 Resposta 1

0

Você pode fazer um fadeOut() ou um hide() nas divs antes do fadeIn().

Para isso você pode pegar as divs pelas classes:

$(".showDiv").click(function(){
    $("div.list-group.space").fadeOut(); // pode usar hide() se não quiser o efeito
    var letra = $(this).data('letra');
    $("#" + letra).fadeIn();
});

Exemplo:

$(".showDiv").click(function(){
    $("div.list-group.space").fadeOut();
    var letra = $(this).data('letra');
    $("#" + letra).fadeIn();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group mr-2" role="group" aria-label="First group">
    <button data-letra="div1" type="button" class="btn btn-secondary showDiv">{{$letra->letra}}</button>
  </div>
  <div class="list-group space" style="display: none" id="div1">
      <div id="accordion" role="tablist" aria-multiselectable="true">
        <div class="card">
          <div style="background-color:#f7f7f9 !important" class="card-header" role="tab" id="headingOne">
            <h5 class="mb-0">
              <a class="collapse-icon" data-toggle="collapse" data-parent="#accordion" href="#{{ $exameAux->id }}" aria-expanded="true" aria-controls="collapseOne">
                <i style="color:#0a5f55;" class="fa fa-plus"></i>
                &nbsp;{{ $exameAux->exame }}
              </a>
            </h5>
          </div>
          <div id="{{ $exameAux->id }}" class="collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="card-body">
              <p><strong>Material</strong>: 1{{ $exameAux->material }}</p>
              <p><strong>Tempo em Jejum</strong>: {{ $exameAux->tempo_jejum }}</p>
              <p><strong>Observações</strong>: {{ $exameAux->obs }}</p>
            </div>
          </div>
        </div>
      </div>
  </div>
  
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button data-letra="div2" type="button" class="btn btn-secondary showDiv">{{$letra->letra}}</button>
  </div>
  <div class="list-group space" style="display: none" id="div2">
      <div id="accordion" role="tablist" aria-multiselectable="true">
        <div class="card">
          <div style="background-color:#f7f7f9 !important" class="card-header" role="tab" id="headingOne">
            <h5 class="mb-0">
              <a class="collapse-icon" data-toggle="collapse" data-parent="#accordion" href="#{{ $exameAux->id }}" aria-expanded="true" aria-controls="collapseOne">
                <i style="color:#0a5f55;" class="fa fa-plus"></i>
                &nbsp;{{ $exameAux->exame }}
              </a>
            </h5>
          </div>
          <div id="{{ $exameAux->id }}" class="collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="card-body">
              <p><strong>Material</strong>: 2{{ $exameAux->material }}</p>
              <p><strong>Tempo em Jejum</strong>: {{ $exameAux->tempo_jejum }}</p>
              <p><strong>Observações</strong>: {{ $exameAux->obs }}</p>
            </div>
          </div>
        </div>
      </div>
  </div>

1
  • Valeu, testei dessa maneira e funcionou. Commented 12/04/2018 às 17:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .