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?
<div class="row" name="hosGridView">
é<div class="row" id="hosGridView">