Hide and show according to button ID

Question

Guys, I have a Jquery, JS problem I have a set of buttons with the initials of each name, I would like to make them appear with your Ivs when clicking and when click on another disappear the previous one and appear only the other, I have already managed to make it appear by clicking, but it will appear as I click on the others

<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

His JS is like this

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

</script>

Answer 1

You can make a fadeOut() or a hide() in divs before the fadeIn().

For that you can take the divs by the 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();
});

Example:

$(".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>