title: auto hide div after 2 seconds
body: <p>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</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  function showonlyone(thechosenone) {
        var newboxes = document.getElementsByTagName("div");
              for(var x=0; x&lt;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);
  &lt;/script&gt;
  &lt;div style="float:left;padding-left:5px;padding-right:5px;" &gt;
           &lt;div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"&gt;
              &lt;a id="myHeader1" href="javascript:showonlyone('newboxes1');" &gt;collapse&lt;/a&gt;
           &lt;/div&gt;
           &lt;div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;"&gt;Div #1&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="float:left;padding-left:5px;padding-right:5px;" &gt;
           &lt;div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"&gt;
              &lt;a id="myHeader2" href="javascript:showonlyone('newboxes2');" &gt;collapse&lt;/a&gt;
           &lt;/div&gt;
           &lt;div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;"&gt;Div #2&lt;/div
      &lt;/div&gt;
      &lt;div style="float:left;padding-left:5px;padding-right:5px;" &gt;
           &lt;div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"&gt;
              &lt;a id="myHeader3" href="javascript:showonlyone('newboxes3');" &gt;collapse&lt;/a&gt;
           &lt;/div&gt;
           &lt;div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;"&gt;Div #3&lt;/div
       &lt;/div&gt;
  </code></pre>