Ben Ben - 5 months ago 9
Javascript Question

Replacing a <DIV> after a set time

I'm trying to replace DIV-A with DIV-B on a landing page after 10 seconds.

I've been looking round and JQUERY seems to be the best bet, but I'm not sure how to do it. There seems to be plenty of solutions for cycling DIVs, or replacing one on a button click, but I just need the first to be replaced by the second.

If there's any other easy solutions I'm open for anything. The site is HTML and I'm already using the minified JQUERY for something else.

Answer

EDIT:

<head> 

  <script type='text/javascript' src='js/jquery-1.5.1.min.js'></script> 

  <script type='text/javascript'> 

  $(window).load(function(){
  setTimeout(
   function(){

      $('#Div-A').replaceWith($('#Div-B'));
      $('#Div-B').show();

   },
   10000
);
  });

  </script> 

</head> 
<body> 
  <div id="Div-A">BOOOOOO</div> 
<div id="Div-B" style="display:none;">YAAAAAA</div> 


</body> 

Here is a working demo http://jsfiddle.net/mpeXp/