Como faço um JavaScript que mostre/esconda uma div em HTML?
Tentei tipo:
function Mudarestado(divid)
{
var disp = document.getElementById(divid).style.display;
disp = "none;" // (ou disp = "block")
}
mas isso não funcionou.
Como faço um JavaScript que mostre/esconda uma div em HTML?
Tentei tipo:
function Mudarestado(divid)
{
var disp = document.getElementById(divid).style.display;
disp = "none;" // (ou disp = "block")
}
mas isso não funcionou.
As soluções abaixo darão um caminho de como implementar em diversas situações.
Javascript puro
function Mudarestado(el) {
var display = document.getElementById(el).style.display;
if(display == "none")
document.getElementById(el).style.display = 'block';
else
document.getElementById(el).style.display = 'none';
}
<div id="minhaDiv">Conteudo</div>
<button type="button" onclick="Mudarestado('minhaDiv')">Mostrar / Esconder</button>
Solução em JQuery
$(function(){
$(".btn-toggle").click(function(e){
e.preventDefault();
el = $(this).data('element');
$(el).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="minhaDiv">Conteudo</div>
<button type="button" class="btn-toggle" data-element="#minhaDiv">Mostrar / Esconder</button>
Angular JS
angular.module("ExemploApp", [])
<body ng-app="ExemploApp">
<div id="minhaDiv" ng-init="MinhaDiv = true" ng-show="MinhaDiv">Conteudo</div>
<button type="button" ng-click="MinhaDiv = !MinhaDiv">Mostrar / Esconder</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
Vue
var app = new Vue({
el: '#app',
data: {
mostrar: true,
oi: "xuxa"
},
methods: {
mostrarEsconder() {
this.mostrar = !this.mostrar
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button type="button" @click="mostrarEsconder">mostrar/esconder</button>
<div v-if="mostrar">Minha Div Com v-if</div>
<div v-show="mostrar">Minha Div Com v-show</div>
</div>
Sua variável disp
está apenas recebendo uma CÓPIA do valor atual do atributo "display". Alterar o valor da variável não mudará o valor deste atributo "display".
Portanto, sua função deveria ser assim:
function Mudarestado(divid)
{
document.getElementById(divid).style.display = "none"; // ou "block"
}
Se você quer uma função que mostre quando está escondido, e esconda quando está visível (ou seja, um toggle), faça assim:
function toggleEstado(divid) {
var div = document.getElementById(divid);
var disp = div.style.display;
div.style.display = disp == 'none' ? 'block' : 'none';
}
i
em function
, e você usou display.style
em vez de style.display
.
Commented
27/06/2014 às 18:57
Talvez sejam apenas alguns erros de sintaxe. Veja um exemplo abaixo:
document.getElementById("minhadiv").style.display = 'none';
Nesse caso, minhadiv é o id da div.
Usando jQuery, a função seria algo assim:
$('ID_DA_DIV').hide();
Se quiser que já carregue invisivel use CSS para isso usando display: none
.
Com jQuery
$('ID_DA_DIV').css("display", "none")
JavaScript é muito poderosa e podemos desfrutar de diversas funcionalidades da linguagem
Conforme dito em uma das repostas anteriores, sua variável disp está recebendo o valor do display
function Mudarestado(divid) {
var disp = document.getElementById(divid).style.display;
disp = "none"; // (ou disp = "block")
}
Seguindo seu pensamento, você teria que mudar a sua função para que a *variável disp* recebece o elemento ao invés do valor de um atributo dele, pode fazer isto da seguinte forma:
var disp = document.getElementById(divid)
Então vc receberia o elemento e ai sim poderia trabalhar em seus atributos, disp.style.display = 'none'
ou disp.style.display = "none"
pois JavaScript entende tanto aspas simples quanto aspas duplas como String.
É possível utilizar também, o método setProperty
da interface CSSStyleDeclaration
, por exemplo:
document.querySelector("element").style.setProperty("display", "none", "important");
O último parâmetro é opcional.
Muito simples, fiz com um botão, mas pode ser feito na própria div
<script>
function Mudarestado(divid){
document.getElementById(divid).style.display = "none";
}
</script>
<html>
<div id=1>aaa</div><input type="button" onclick="Mudarestado(1)">
</html>
onclick
na div
<script>
function Mudarestado(divid){
document.getElementById(divid).style.display = "none";
}
</script>
<html>
<div id=1 onclick="Mudarestado(1)">aaa</div>
</html>
Usando como referência o nome da class:
function ocultaElemento(el) {
var display = document.getElementsByClassName(el);
if(display[0].style.display == "none")
display[0].style.display = 'block';
else
display[0].style.display = 'none';
}