How to make a DIV visible and invisible with JavaScript

Question

Can you do something like

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

Answer 1

You can use opacity which is similar to visibility but allow to smooth transition and control other parameters like height (for snippet simplicity I put js logic in html directly - don't do it in production code)

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

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

Toggle