title: simple div onclick show javascript
body: <p>when I click on any  link the correspoding div shows up
  but when I click the next link, the newly clicked dive shows up as well as the previously clicked. I would like the previos div to hide. NEW to development please some one help me........</p>
  
  <p>this is the html code for links:</p>
  
  <pre><code>&lt;a class="hide" onclick="showdiv('firstimpression'); " href="#"&gt;First Impression&lt;/a&gt;
  &lt;a class="hide" onclick="showdiv('speaking'); " href="#"&gt;Speaking&lt;/a&gt;
  &lt;a class="hide" onclick="showdiv('eating'); " href="#"&gt;Eating&lt;/a&gt;
  &lt;a class="hide" onclick="showdiv('taste'); " href="#"&gt;Taste&lt;/a&gt;
  &lt;a class="hide" onclick="showdiv('saliva'); " href="#"&gt;Saliva&lt;/a&gt;
  &lt;a class="hide" onclick="showdiv('cleaning');" href="#"&gt;Cleaning&lt;/a&gt;
  &lt;a class="hide" onclick="showdiv('nighttime');" href="#"&gt;Night Time&lt;/a&gt;
  &lt;a class="hide" onclick="showdiv('singledenture');" href="#"&gt;Single Denture&lt;/a&gt;
  &lt;a class="hide" onclick="showdiv('soreness');"  href="#"&gt;Soreness&lt;/a&gt;
  &lt;a class="hide" onclick="showdiv('burning');" href="#"&gt;Burning&lt;/a&gt;
  &lt;a class="hide" onclick="showdiv('adapting');" href="#"&gt;Adapting&lt;/a&gt;
  &lt;a class="hide" onclick="showdiv('futureconsideration');" href="#"&gt;Future Consideration&lt;/a&gt;
  &lt;a class="hide" onclick="showdiv('conclusion');" href="#"&gt;Conclusion&lt;/a&gt;
  </code></pre>
  
  <p>these are the divs:</p>
  
  <pre><code>&lt;div id="firstimpression" class="patientinfodivs"&gt;
  &lt;div id="speaking" class="patientinfodivs"&gt;
  </code></pre>
  
  <p>.....and so on</p>
  
  <p>Javascript code</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function showdiv(id){
  document.getElementById(id).style.display = "block";
  }
  &lt;/script&gt;
  </code></pre>