Problem in hiding div

Asked

Viewed 36 times

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 could be causing this problem?

javascript jquery
  • 2

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

  • Put, @Lucascosta, that lack of attention to mine! Thanks :)

1 answer

1


That’s exactly what Lucas Costa noted in the comment and what 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>
<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>

Browser other questions tagged javascript jquery

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