Cómo hacer que un DIV sea visible e invisible con JavaScript

Puedes hacer algo como

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

si [DIV] es un elemento, entonces

[DIV].style.visibility='visible'

O

[DIV].style.visibility='hidden' 

Supongamos que no usa una biblioteca como jQuery.

Si aún no tiene una referencia al elemento DOM, obtenga una usando var elem = document.getElementById('id');

Luego, puede establecer cualquier propiedad CSS de ese elemento. Para mostrar / ocultar, puede usar dos propiedades: displayy visibility, que tienen efectos ligeramente diferentes:

El ajuste style.displayse verá como si el elemento no estuviera presente en absoluto ("eliminado").

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)

o style.visibilityhará que el div todavía esté allí, pero esté "todo vacío" o "todo blanco"

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

Si está utilizando jQuery, puede hacerlo aún más fácil siempre que desee establecer la displaypropiedad:

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

Utilizará automáticamente el displayvalor apropiado ; no tiene que preocuparse por el tipo de elemento (en línea o bloque). Además, elemno sólo puede ser un elemento DOM sino también un selector como #ido .class, o cualquier otra cosa que es válido CSS 3 (y más!).

Puede usar visibilityo, displaypero debe aplicar cambios al div.styleobjeto y no al divobjeto en sí.

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

Puede utilizar las funciones DOM: setAttribute y removeAttribute. En el siguiente enlace tienes un ejemplo de cómo utilizarlos.

funciones setAttribute y removeAttribute

Una vista rápida:

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

Puede usar lo opacityque es similar visibility pero permite una transición suave y controlar otros parámetros como la altura (para simplificar el fragmento, puse la lógica js en html directamente, no lo haga en el código de producción)

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

Utilice el atributo 'oculto' del elemento DOM:

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

Hacer invisible usando CSS

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

Hacer visible usando Javascript

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