auto hide div after 2 seconds

Question

i made a code to only show one div and auto hide the div after x seconds it worked for the first time only after that .................... here is the code

<script type="text/javascript">

function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("name");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}
function hidediv(arg) {
    document.getElementById(arg).style.display = 'none';
}
setTimeout("hidediv('newboxes1')", 4000);
setTimeout("hidediv('newboxes2')", 4000);
setTimeout("hidediv('newboxes3')", 4000);
</script>
<div style="float:left;padding-left:5px;padding-right:5px;" >
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >collapse</a>
         </div>
         <div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #1</div>
    </div>
    <div style="float:left;padding-left:5px;padding-right:5px;" >
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >collapse</a>
         </div>
         <div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div
    </div>
    <div style="float:left;padding-left:5px;padding-right:5px;" >
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >collapse</a>
         </div>
         <div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div
     </div>

Answer 1

Better you debug the code. YOu can install firebug for firefox. It is a pretty good tool for finding JS errors.

Answer 2

use setInterval instead of setTimeout

ex:

setInterval(function(){ hidediv('newboxes1');}, 4000);
setInterval(function(){ hidediv('newboxes2');}, 4000);
setInterval(function(){ hidediv('newboxes3');}, 4000);