How to hide / show a div in HTML?

Navigation
25

How do I make a JavaScript that show / hide an HTML div?

I tried type: 

function Mudarestado(divid)
{
    var disp = document.getElementById(divid).style.display;
    disp = "none; // (ou disp = "block")
}

But that did not work.

    
asked by anonymous 27.06.2014 / 20:33

9 answers

24

The solutions below will provide a way of how to implement in a variety of situations.

Pure Javascript 

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>

Solution in 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><divid="minhaDiv">Conteudo</div>
<button type="button" class="btn-toggle" data-element="#minhaDiv">Mostrar / Esconder</button>

Angle 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>
    
27.06.2014 / 20:48
8

Your variable disp is only getting a COPY of the current value of the "display" attribute. Changing the value will not change the value of this "display" attribute.

So its function should look like this: 

function Mudarestado(divid)
{
    document.getElementById(divid).style.display = "none"; // ou "block"
}
    
27.06.2014 / 20:37
7

If you want a function that shows when it is hidden, and hide when it is visible (ie a toggle ), do so: 

function toggleEstado(divid) {
    var div = document.getElementById(divid);
    var disp = div.style.display;
    div.style.display = disp == 'none' ? 'block' : 'none';
}
    
27.06.2014 / 20:45
2

Maybe it's just some syntax errors. Here's an example below: 

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

In this case, minhadiv is the div id.

    
27.06.2014 / 20:38
1

JavaScript is very powerful and we can enjoy various language features

As stated in one of the previous answers, your disp variable is getting the display value 

function Mudarestado(divid) {
    var disp = document.getElementById(divid).style.display;
    disp = "none"; // (ou disp = "block")
 }

Following your thinking, you would have to change your function so that * variable disp * receives the element rather than the value of an attribute of it, you can do this as follows: 

var disp = document.getElementById(divid)

Then you would receive the element and then yes it could work on its attributes, disp.style.display = 'none' or disp.style.display = "none" because JavaScript understands both single quotes and double quotes like String.

    
27.06.2014 / 20:57
1

Using jQuery , the function would look something like this: 

$('ID_DA_DIV').hide();

If you want to already load invisible use CSS for this using display: none .

With jQuery 

$('ID_DA_DIV').css("display", "none")
    
28.06.2014 / 08:52
1

You can also use the setProperty method of the CSSStyleDeclaration interface, for example: 

document.querySelector("element").style.setProperty("display", "none", "important");

The last parameter is optional.

    
09.03.2018 / 06:38
0

Very simple, I did it with a button, but it can be done in the div itself 

<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>
    
27.06.2014 / 20:52
0

Using the class name as a reference: 

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';
}
    
09.03.2018 / 05:28
Error when using Slick.js in modal Jquery filter data on a node using a reference