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?