Simple onclick show javascript div

Question

when I click on any link, the corresponding div appears, but when I click on the next link, the immersion just appeared appears, as well as the previous click. I would like the previous div to hide. NEW for development, please help me ........

this is the html code for the links:

<a class="hide" onclick="showdiv('firstimpression'); " href="#">First Impression</a> <a class="hide" onclick="showdiv('speaking'); " href="#">Speaking</a> <a class="hide" onclick="showdiv('eating'); " href="#">Eating</a> <a class="hide" onclick="showdiv('taste'); " href="#">Taste</a> <a class="hide" onclick="showdiv('saliva'); " href="#">Saliva</a> <a class="hide" onclick="showdiv('cleaning');" href="#">Cleaning</a> <a class="hide" onclick="showdiv('nighttime');" href="#">Night Time</a> <a class="hide" onclick="showdiv('singledenture');" href="#">Single Denture</a> <a class="hide" onclick="showdiv('soreness');" href="#">Soreness</a> <a class="hide" onclick="showdiv('burning');" href="#">Burning</a> <a class="hide" onclick="showdiv('adapting');" href="#">Adapting</a> <a class="hide" onclick="showdiv('futureconsideration');" href="#">Future Consideration</a> <a class="hide" onclick="showdiv('conclusion');" href="#">Conclusion</a> 

these are divs:

 <div id="firstimpression" class="patientinfodivs"> <div id="speaking" class="patientinfodivs"> 

..... etc.

Javascript Code

 <script type="text/javascript"> function showdiv(id){ document.getElementById(id).style.display = "block"; } </script> 

Answer 1

As much as I hate creating global variables, they are sometimes so convenient ...

 var _hidediv = null; function showdiv(id) { if(_hidediv) _hidediv(); var div = document.getElementById(id); div.style.display = 'block'; _hidediv = function () { div.style.display = 'none'; }; } 

This will prevent unnecessary searching through the div to find the one you should hide.

Edit: extension on @StevenRoose sentence:

 var _targetdiv = null; function showdiv(id) { if(_targetdiv) _targetdiv.style.display = 'none'; _targetdiv = document.getElementById(id); _targetdiv.style.display = 'block'; } 

Answer 2

You need to have all your elements = "none" displayed in your showdiv () first; And then make the selected element display = "block";

You can also organize it in two hidealldivs () functions, which will hide all divs and your current showdiv (), which will display the selected one.

Then onClick will call both of them one by one

 onclick="hidealldivs(); showdiv('eating')" 

Answer 3

First you need to hide your divs. Either in StyleSheet or inline.

 .patientinfodivs { display: none; } <div id="firstimpression" class="patientinfodivs" style="display: none;"> 

Answer 4

Here is the version without using the global (except for the function itself). The variable is held on the function object:

 function showdiv( id ) { if( showdiv.div ) { showdiv.div.style.display = 'none'; } showdiv.div = document.getElementById(id); showdiv.div.style.display = 'block'; }