CODEWITHSUNDEEP
javascriptcss
user6322822
user6322822

Reputation:

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.

Upvotes: 1

Views: 1479

Answers (5)

Keith
Keith

Reputation: 24191

Personaly I would avoid using ID's here as they polute the global.

You can do this nicely with CSS and classes..

var holder = document.querySelector('.holder');
setTimeout(function () {
  holder.classList.remove('isloading');
}, 5000);
.loading {
  display: none;
}
div.isloading .loading {
  display: block;
}

.main {
  display: none;
}
div:not(.isloading) .main {
  display: block;
}
<div class="holder isloading">
  <div class="loading">Loading</div>
  <div class="main">Main</div>
</div>

Upvotes: 0

Javier Rey
Javier Rey

Reputation: 1620

function loading(dur) {
  if (window.busy) {return;}
  document.getElementById('loading').style.display = "block";
  document.getElementById('main').style.display = "none";
  window.busy = setTimeout(function () {
    document.getElementById('loading').style.display = "none";
    document.getElementById('main').style.display = "block";
    window.busy = 0;
  }, dur);
}

loading(5000);

Upvotes: 0

Geeky
Geeky

Reputation: 7498

Use setTimeout.

window.onload = function() {
  setTimeout(function() {

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

    document.getElementById("main").style.display = "block";
  }, 5*1000);
}
#main {
  display: none;
}
<div id="loading">loading</div>
<div id="main">main</div>

Hope this helps

Upvotes: 0

Derek
Derek

Reputation: 859

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

Upvotes: 1

claudios
claudios

Reputation: 6656

Maybe this could help you out without the use of CSS. Only pure Jquery.

$("#loading").show();
$("#main").hide();
setTimeout(function() {
  $("#loading").hide();
  $("#main").show()
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="loading">loading here..</div>
<div id="main" class="hidden">This is main content</div>

Upvotes: 0

Related Questions