0

Fiz uma função em JQuery para esconder/exibir 2 divs. A primeira div funciona normalmente, mas a segunda não :/

A ideia é ocultar a div, mudar o ícone do botão e mudar o texto ao mesmo tempo:

$(document).ready(function () {
        $("#btnDadosManuais").click(function () {
            if (!$("#hosDadosManuais").is(":visible")) {
                $("#hosDadosManuais").toggle();
                $("#textManualData").text("Recolher");
                $(this).find('span').toggleClass('glyphicon glyphicon-resize-full').toggleClass('glyphicon glyphicon-resize-small');
            } else {
                $("#hosDadosManuais").toggle();
                $("#textManualData").text("Expandir");
                $(this).find('span').toggleClass('glyphicon glyphicon-resize-small').toggleClass('glyphicon glyphicon-resize-full');
            }
        });
        $("#btnGridView").click(function () {
            if (!$("#hosGridView").is(":visible")) {
                $("#hosGridView").toggle();
                $("#textLastMonth").text("Recolher");
                $(this).find('span').toggleClass('glyphicon glyphicon-resize-full').toggleClass('glyphicon glyphicon-resize-small');
            } else {
                $("#hosGridView").toggle();
                $("#textLastMonth").text("Expandir");
                $(this).find('span').toggleClass('glyphicon glyphicon-resize-small').toggleClass('glyphicon glyphicon-resize-full');
            }
        });
});

Observem que elas usam o mesmo código, mudando apenas os IDs.

<button class="btn btn-primary-outline" id="btnDadosManuais">
    <h4 id="textManualData">Recolher</h4>
    <span class="glyphicon glyphicon-resize-small">
    </span>
</button>
<div class="row" id="hosDadosManuais">
    <!-- um formulário html -->
</div>

<button class="btn btn-primary-outline" id="btnGridView">
    <h4 id="textLastMonth">Recolher</h4>
    <span class="glyphicon glyphicon-resize-small">
    </span>
</button>
<div class="row" name="hosGridView">
    <!-- uma tabela html -->
</div>

O que pode estar causando esse problema?

2
  • 2
    <div class="row" name="hosGridView"> é <div class="row" id="hosGridView">
    – BrTkCa
    Commented 4/08/2017 às 19:39
  • Puts, @LucasCosta, que falta de atenção a minha! Obrigado :)
    – Csorgo
    Commented 4/08/2017 às 19:44

1 Resposta 1

1

É bem isso que o Lucas Costa observou no comentário e que pode ser testado aqui

<div class="row" name="hosGridView"> é <div class="row" id="hosGridView">

$(document).ready(function () {
        $("#btnDadosManuais").click(function () {
            if (!$("#hosDadosManuais").is(":visible")) {
                $("#hosDadosManuais").toggle();
                $("#textManualData").text("Recolher");
                $(this).find('span').toggleClass('glyphicon glyphicon-resize-full').toggleClass('glyphicon glyphicon-resize-small');
            } else {
                $("#hosDadosManuais").toggle();
                $("#textManualData").text("Expandir");
                $(this).find('span').toggleClass('glyphicon glyphicon-resize-small').toggleClass('glyphicon glyphicon-resize-full');
            }
        });
        $("#btnGridView").click(function () {
            if (!$("#hosGridView").is(":visible")) {
                $("#hosGridView").toggle();
                $("#textLastMonth").text("Recolher");
                $(this).find('span').toggleClass('glyphicon glyphicon-resize-full').toggleClass('glyphicon glyphicon-resize-small');
            } else {
                $("#hosGridView").toggle();
                $("#textLastMonth").text("Expandir");
                $(this).find('span').toggleClass('glyphicon glyphicon-resize-small').toggleClass('glyphicon glyphicon-resize-full');
            }
        });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary-outline" id="btnDadosManuais">
    <h4 id="textManualData">Recolher</h4>
    <span class="glyphicon glyphicon-resize-small">
    </span>
</button>
<div class="row" id="hosDadosManuais">
    um formulário html
</div>

<button class="btn btn-primary-outline" id="btnGridView">
    <h4 id="textLastMonth">Recolher</h4>
    <span class="glyphicon glyphicon-resize-small">
    </span>
</button>
<div class="row" id="hosGridView">
    uma tabela html
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .