Show div and hide what was or was previously opened by clicking on <a> button

Question

@foreach($user->endereco as $endereco)
   <table class="table">
      <thead class="thead-light">
         <tr>
            <th scope="row">Endereço: {{ $endereco->endereco }}</th>
            <th scope="row">Número: {{ $endereco->numero }}</th>
            <th scope="row"><small><a onclick="showendereco();" id="{{ $endereco->id }}">Mostrar Tudo</a></small></th>
         </tr>
      </thead>
   </table>
   <div class="endereco end-{{ $endereco->id }}" style="display: none;">
      <table class="table">
         <tbody>
            <tr>
               <th scope="row">complemento:</th>
               <td>{{ $endereco->complemento }}</td>
            </tr>
            <tr>
               <th scope="row">Bairro:</th>
               <td>{{ $endereco->bairro }}</td>
            </tr>
            <tr>
               <th scope="row">Cidade:</th>
               <td>{{ $endereco->cidade }}</td>
            </tr>
            <tr>
               <th scope="row">Estado:</th>
               <td>{{ $endereco->estado }}</td>
            </tr>
            <tr>
               <th scope="row">Ponto de Referência:</th>
               <td>{{ $endereco->referencia }}</td>
            </tr>
         </tbody>
      </table>
   </div>
@endforeach

I have this address listing, showing only a piece of the address, with a button to show the rest of the data.

I want that when an address is expanded, and if it is clicked on another address, what was already expanded between in Hidden and the clicked be opened.

can have 1 address.. can have 2.. 5... etc.. need to show only 1 when clicked on it.

Answer 1

Instead of using a function for this (onclick="showendereco();"), can simply put a class (class="mostratudo") and create an event that will detect by the class when the button was clicked, and open the respective div based on the id of the button, since each div is related to your button by the class .end-ID_DO_BOTÃO.

Example (other explanations in the code):

$(document).ready(function(){
   
   $(".mostratudo").click(function(){
      
      // pega a respectiva div onde possui a classe "end-" + o id do botão clicado
      var comp = $("div.end-"+this.id);

      if(comp.is(":visible")){ // se a div estiver visível, oculta ela
         comp.hide();
      }else{ // caso contrário, oculta todas as divs e mostra a do botão clicado
         $(".endereco:visible").hide();
         comp.show();
      }

   });
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
   <thead class="thead-light">
      <tr>
         <th scope="row">Endereço: {{ $endereco->endereco }}</th>
         <th scope="row">Número: {{ $endereco->numero }}</th>
         <th scope="row"><small><a class="mostratudo" id="1">Mostrar Tudo</a></small></th>
      </tr>
   </thead>
</table>
<div class="endereco end-1" style="display: none;">
   <table class="table">
      <tbody>
         <tr>
            <th scope="row">complemento:</th>
            <td>{{ $endereco->complemento }}</td>
         </tr>
         <tr>
            <th scope="row">Bairro:</th>
            <td>{{ $endereco->bairro }}</td>
         </tr>
         <tr>
            <th scope="row">Cidade:</th>
            <td>{{ $endereco->cidade }}</td>
         </tr>
         <tr>
            <th scope="row">Estado:</th>
            <td>{{ $endereco->estado }}</td>
         </tr>
         <tr>
            <th scope="row">Ponto de Referência:</th>
            <td>{{ $endereco->referencia }}</td>
         </tr>
      </tbody>
   </table>
</div>

<table class="table">
   <thead class="thead-light">
      <tr>
         <th scope="row">Endereço: {{ $endereco->endereco }}</th>
         <th scope="row">Número: {{ $endereco->numero }}</th>
         <th scope="row"><small><a class="mostratudo" id="2">Mostrar Tudo</a></small></th>
      </tr>
   </thead>
</table>
<div class="endereco end-2" style="display: none;">
   <table class="table">
      <tbody>
         <tr>
            <th scope="row">complemento:</th>
            <td>{{ $endereco->complemento }}</td>
         </tr>
         <tr>
            <th scope="row">Bairro:</th>
            <td>{{ $endereco->bairro }}</td>
         </tr>
         <tr>
            <th scope="row">Cidade:</th>
            <td>{{ $endereco->cidade }}</td>
         </tr>
         <tr>
            <th scope="row">Estado:</th>
            <td>{{ $endereco->estado }}</td>
         </tr>
         <tr>
            <th scope="row">Ponto de Referência:</th>
            <td>{{ $endereco->referencia }}</td>
         </tr>
      </tbody>
   </table>
</div>