Show div and hide the one that was or was previously opened by clicking the

Question

Show div and hide the one that was or was previously opened by clicking the

Navigation

#1 by (1 votes)

0

@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, the one that already was expanded enters in hidden and the clicked one is opened.

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

javascript jquery

asked by anonymous 22.07.2018 / 20:21

1 answer

NodeJS multiple url in app.get Express Array search with conditions

score 1 · Accepted Answer

Instead of using a function for this ( onclick="showendereco();" ), you can simply put a class ( class="mostratudo" ) and create an event that will detect by the class when the button was clicked, and open its div based it is no id of the button, since every div is related to its button by 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><tableclass="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>