Como tornar um DIV visível e invisível com JavaScript

Você pode fazer algo como

function showDiv()
{
    [DIV].visible = true;
    //or something
}

se [DIV] é um elemento, então

[DIV].style.visibility='visible'

OU

[DIV].style.visibility='hidden' 

Vamos supor que você não use uma biblioteca como a jQuery.

Se você ainda não tiver uma referência ao elemento DOM, obtenha uma usando var elem = document.getElementById('id');

Depois, você pode definir qualquer propriedade CSS desse elemento. Para mostrar / ocultar, você pode usar duas propriedades: displaye visibility, que têm efeitos ligeiramente diferentes:

O ajuste style.displayparecerá como se o elemento não estivesse presente ("removido").

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

ou style.visibilityfará com que o div ainda esteja lá, mas seja "todo vazio" ou "todo branco"

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

Se estiver usando jQuery, você pode fazer isso ainda mais fácil, desde que queira definir a displaypropriedade:

$(elem).hide();
$(elem).show();

Ele usará automaticamente o displayvalor apropriado ; você não precisa se preocupar com o tipo de elemento (embutido ou bloco). Além disso, elemnão pode ser apenas um elemento DOM, mas também um seletor, como #idou .classou qualquer outra coisa que seja CSS3 válida (e muito mais!).

Você pode usar visibilityou, displaymas deve aplicar alterações ao div.styleobjeto e não ao divobjeto em si.

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';

Você pode usar as funções DOM: setAttribute e removeAttribute. No link a seguir você tem um exemplo de como usá-los.

funções setAttribute e removeAttribute

Uma visão rápida:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");

Você pode usar o opacityqual é semelhante a, visibility mas permite suavizar a transição e controlar outros parâmetros como altura (para simplificar o snippet, coloquei a lógica js em html diretamente - não faça isso no código de produção)

.box { width:150px; height: 150px; background: red; transition: 0.5s }

.hide { opacity: 0; height: 10px}

<div id="box" class="box"></div>

<button onclick="box.classList.toggle('hide')">Toggle</button>

Use o atributo 'oculto' do elemento DOM:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}

Tornar invisível usando CSS

#div_id {
        /*height: 400px;*/
         visibility:hidden;
    }

Torne visível usando Javascript

document.getElementById('div_id').style.visibility = 'visible';