Problem with show/Hide

Asked

Viewed 150 times

0

I have a div that by default this hidden, I have a simple jquery that when I click on the button opens the div, only I have several buttons with the same hidden div.

What happens is if I open a div when I click another button, it opens the same div and they’re all open. What I want is that when clicked 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>
jquery

  • You only have one ID #botao_ver_opcoes on the page or you have one for each player. Can you show the HTML that is generated for each player? (if that’s what you put in the question, there’s a parent element of those two per player?)

  • A foreach is generated in which each one has the id #botao_ver_options

  • Okay, you can show that forEach? it must be corrected.

  • This in the question

  • 8

    I will be obliged to insist on my old suggestion: please use scores in your texts. They are not merely decorative, but make the text much easier to read, as it makes sense.

  • Can you display the HTML you have rendered? without these {{...}}...

Show 1 more comment

1 answer

2


Follows the function:

  • By clicking on the botao_ver_opcoes, is recovered its attribute data-id-jogador
  • After, is held a each by all div with id opcoes- and executed a hide.
  • At last a show to 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>
  <button class="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>

  • It works as I want but for example I open a window that covers the other button it is always open as for example I decide when clicking outside close the window or it is always open

  • @Césarsousa Buguei aq. Explain better if possible.

  • it is working but for example I open a window it is always open and the div that opens even covers the other button to open as I do for example can be by clicking again the button closes

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.