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>
{{ $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>