Lewis Day Lewis Day - 1 month ago 8
CSS Question

Hide one div and show another?

I have two

divs
on called
#loading
and one called
#main
;

<div id="loading"></div>
<div id="main"></div>


What I'm trying to achieve is with using javascript, show
#loading
for five seconds then after the five seconds hide the
#loading
div and show the
#main
div. The
#main
div is default hidden and once the
#loading
div is hidden the
#main
div shows.

I'm assuming that to achieve this would be a mixture of css and javascript; hopefully you understand what I'm trying to achieve and can help me accomplish what I'm trying to achieve.

Thankyou.

Answer

Your css would be:

#main {
    display:none;
}

The JS would be:

setTimeout(function() {
    document.getElementById('main').style.display = 'block';
    document.getElementById('loading').style.display = 'none';
}, 5000);