How to hide/show a div in HTML?

Asked

Viewed 166,445 times

34

How do I make a Javascript that shows/hides a div in HTML?

I tried like:

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

but that didn’t work.

javascript html div

  • Nathan, check out how the markdown works here at SOPT: http://answall.com/editing-help

9 answers

38


The solutions below will give a way of how to implement in various 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>
<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>

  • In this case the content already starts displaying, how to make it start hidden?

  • You can use getElementsByClassName to get the tbm element. Ah, vc creates the display variable but did not use, rs.

8

Its variable disp is just getting a COPY of current value of the "display" attribute. Change the variable value nay will change the value of this attribute "display".

Therefore, its function should be like this:

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

  • a yes now I understand. in Disp was only a means gave to collect the state of the object but not define it. thank you.

7

If you want a function that shows when it is hidden, and hides when it is visible (i.e., a toggle), do so:

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

  • I used the following code and it still didn’t work:

  • <html> <head> <script type="text/javascript"> functon mudar(id){ Document.getElementById(id).display.style = 'None'; } </script> </head> <body> <a href="#" onclick="change('footerx');">Show/hide footer</a> <div id="footerx"> <a href="javascript:void(0)" onclick="window.open('file://C:/', '_new');">Local Disk C:</a> </div> </body> </html>

  • 2

    This code (which only hides the div, is not what I posted) has 2 errors: missing one i in function, and you used display.style instead of style.display.

3

Maybe it’s just a few syntax errors. See an example below:

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

In this case, minhadiv is the id of the div.

  • No, both "single quotes" ('') and "double quotes" ("") are string in javascript.

  • Yes now I understand. Thank you very much

  • this worked <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>

2

Using jQuery, the function would be something like this:

$('ID_DA_DIV').hide();

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

With jQuery

$('ID_DA_DIV').css("display", "none")

1

It is also possible to use the method setProperty of the interface CSSStyleDeclaration, for example:

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

The last parameter is optional.

1

Javascript is very powerful and we can enjoy several language features

As stated in one of the previous responses, its variable Disp is receiving 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 its function so that the *variable Disp* receives the element instead of the value of an attribute of it, you can do this as follows:

var disp = document.getElementById(divid)

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

0

Using the class name as 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';
}

0

Very simple, I made with a button, but 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 in div

<script>

function Mudarestado(divid){

 document.getElementById(divid).style.display = "none";

}

</script>

<html>

<div id=1 onclick="Mudarestado(1)">aaa</div>

</html>

  • And How do I change the text of a <a href="#">Hello</a> ?

  • Document.getElementById("Iddoa"). href= "link"

  • 1

    Understood how it works?

  • 1

    $("#Iddoa"). text("Textoalterado"); only with Jquery did I get it. I think that’s what you wanted??

  • 1

    @Nathan130200 I actually got it with Document.getElementById("Iddoa"). text= "text you want"!

Browser other questions tagged javascript html div

You are not signed in. Login or sign up in order to post.