Problem in hiding div

0

I made a function in JQuery to hide / display 2 divs. The first div works normally, but the second one does not: /

The idea is to hide the div, change the button icon and change the text at the same time:

$(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');
            }
        });
});

Note that they use the same code, changing only the 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>

What might be causing this problem?

    
asked by anonymous 04.08.2017 / 21:35

1 answer

1

This is what Lucas Costa noted in the comment and can be tested here

<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><buttonclass="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>
    
04.08.2017 / 22:28