34

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.

1

9 Respostas 9

41

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>

2
  • Nesse caso o conteúdo ja inicia exibindo, como fazer que ele inicie oculto? Commented 29/12/2015 às 13:45
  • Você pode usar getElementsByClassName para pegar o elemento tbm. Ah, vc cria a variável display mas não usou, rs. Commented 9/03/2018 às 4:27
8

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"
}
1
  • a sim agora entendo. em disp só era um meio deu recolher o estado do objeto mas não definilo. muito obrigado. Commented 27/06/2014 às 18:40
7

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';
}
3
  • usei o seguinte código e mesmo assim não functionou: Commented 27/06/2014 às 18:48
  • <html> <head> <script type="text/javascript"> functon mudar(id){ document.getElementById(id).display.style = 'none'; } </script> </head> <body> <a href="#" onclick="mudar('footerx');">Mostra/oCULTAR fOOTER</a> <div id="footerx"> <a href="javascript:void(0)" onclick="window.open('file:///C:/', '_new');">Disco Local C:</a> </div> </body> </html> Commented 27/06/2014 às 18:49
  • 2
    Esse código (que só oculta a div, não é o que eu postei) tem 2 erros: falta um i em function, e você usou display.style em vez de style.display.
    – bfavaretto
    Commented 27/06/2014 às 18:57
3

Talvez sejam apenas alguns erros de sintaxe. Veja um exemplo abaixo:

document.getElementById("minhadiv").style.display = 'none';

Nesse caso, minhadiv é o id da div.

3
  • Não, tanto "aspas simples" ('') com "aspas duplas" ("") são string em javascript.
    – anmaia
    Commented 27/06/2014 às 18:40
  • a sim agora entendi. valeu mesmo Commented 27/06/2014 às 18:41
  • essa funcionou <pre> 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'; } </pre> Commented 27/06/2014 às 18:55
2

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") 
1

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.

1

É 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.

0

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>
5
  • E Como faço para mudar o texto de um <a href="#">Olá</a> ? Commented 27/06/2014 às 18:57
  • document.getElementById("IDdoa").href= "link" Commented 27/06/2014 às 19:00
  • 1
    Entendeu como funciona? Commented 27/06/2014 às 19:06
  • 1
    $("#IDdoa").text("TextoAlterado"); somente com JQuery consegui.Acho que era isso que você queria?? Commented 27/06/2014 às 19:17
  • 1
    @Nathan130200 Na verdade consegui com document.getElementById("IDdoa").text= "texto que você quiser"! Commented 27/06/2014 às 19:29
0

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';
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .