Problem with show / hide

Navigation
0

What happens is that if I open a div when I click on another button it opens the same div and they are all open. What I want is that when you click on a button to open the div, close the div that is currently open.

Jquery 

$(document).ready(function(){
    $("body").on('click', '#botao_ver_opcoes', function(e) {
        var id_jogador_bloqueado = $(this).data("id-jogador");
        $('#opcoes-'+id_jogador_bloqueado+'').toggle();
        event.stopPropagation();
        $(document).click(function(){
            $('#opcoes-'+id_jogador_bloqueado+'').hide();
        });
    });
});

HTML 

<div id="show_jogadores" style="width: 150px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; border-right: none; cursor: pointer;">
    <p>Escolha uma opção</p>
</div>
<div style="width: 30px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; cursor: pointer;">
    <i id="botao_ver_opcoes" data-id-jogador="{{ $deleted_players->id }}" class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div id="opcoes-{{ $deleted_players->id }}" style="width: 180px; margin-top: 30px; background-color: white; border: 1px solid #c2c5cd; z-index: 10; position: absolute; display: none; border-top: none;">
    <div data-toggle="modal" data-target="#modal-add-credito" id="add-credito-btn" data-id-jogador="{{ $deleted_players->id }}" style="text-align: center; line-height: 30px; cursor: pointer;">Transferir Dinheiro</div>
    <div data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-jogador="{{ $deleted_players->id }}" style="text-align: center; line-height: 30px; cursor: pointer;">Mudar Senha</div>
</div>

Foreach 

<div class="content">
    <div class="table-responsive alt-table">
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th data-sort="int" class="table-check">
                        ID do Jogador
                    </th>
                    <th data-sort="string">
                        Nome do Jogador
                    </th>
                    <th data-sort="string">
                        Data
                    </th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
            @if (count($players_deleted) > 0)
                @foreach($players_deleted as $deleted_players)
                    <tr>
                        <td class="table-check">
                            {{ $deleted_players->id }}
                        </td>
                        <td class="table-check">
                           {{ $deleted_players->username }}
                        </td>
                        <td class="table-check">
                            {{ $deleted_players->created_at }}
                        </td>
                        <td class="table-check">
                            <div id="show_jogadores" style="width: 150px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; border-right: none; cursor: pointer;">
                                <p>Escolha uma opção</p>
                            </div>
                            <div style="width: 30px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; cursor: pointer;">
                                <i id="botao_ver_opcoes" data-id-jogador="{{ $deleted_players->id }}" class="fa fa-angle-down" aria-hidden="true"></i>
                            </div>
                            <div id="opcoes-{{ $deleted_players->id }}" style="width: 180px; margin-top: 30px; background-color: white; border: 1px solid #c2c5cd; z-index: 10; position: absolute; display: none; border-top: none;">
                                <div data-toggle="modal" data-target="#modal-add-credito" id="add-credito-btn" data-id-jogador="{{ $deleted_players->id }}" style="text-align: center; line-height: 30px; cursor: pointer;">Transferir Dinheiro</div>
                                <div data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-jogador="{{ $deleted_players->id }}" style="text-align: center; line-height: 30px; cursor: pointer;">Mudar Senha</div>
                            </div>  
                        </td>
                    </tr>
                @endforeach 
            </tbody>
            @else
                <tbody>
                    <tr>
                        <th colspan="4" class="table-check">
                            <div style="text-align: center; color: #000000;">Nenhum Jogador eliminado encontrado</div>
                        </th>
                    </tr>
                </tbody>    
            @endif
        </table>
    </div>
</div>
    
asked by anonymous 21.04.2017 / 15:23

1 answer

2

Follow the function:

  • By clicking on botao_ver_opcoes , its data-id-jogador attribute is retrieved
  • Afterwards, a each is performed by all div with opcoes- and executed hide .
  • Finally a show is performed for the correct div. 

$(document).ready(function(){
    $(".botao_ver_opcoes").on("click", function() {
       var id_jogador_bloqueado = $(this).attr("data-id-jogador");
       $('div[id*="opcoes-"]').each(function(){
          $(this).hide();
       });
       $('#opcoes-'+id_jogador_bloqueado).show();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script><div><buttonclass="botao_ver_opcoes" data-id-jogador="1">option 1</button>
  <button class="botao_ver_opcoes" data-id-jogador="2">option 2</button>
</div>


<div id="opcoes-1" style="display:none">
    <div data-id-jogador="1" >Transferir Dinheiro 1</div>
    <div data-id-jogador="1" >Mudar Senha 1</div>
</div>  

<div id="opcoes-2" style="display:none">
    <div data-id-jogador="2" >Transferir Dinheiro 2</div>
    <div data-id-jogador="2" >Mudar Senha 2</div>
</div>
    
24.04.2017 / 18:33
Global control for ExecutorService How to export and import a database