Don't show more than one div at a time Javascript
<p>I currently have four divs, which are each linked to a hidden div:</p>

<p>div1 - div1hidden
div2 - div2hidden
div3 - div3hidden
div4 - div4hidden</p>

<p>When a user clicks on one of the divs the hidden div appears. When clicked on again the div disappears.</p>

<p>The problem I have is if all four divs are clicked on all four hidden will appear. What I would like to do is only show one at a time. </p>

<p>For Example if 'div1hidden' is showing and the user clicks on div2 before hiding div1hidden, div1hidden will hide and div2hidden will appear.</p>

<p>This is the code I have so far:</p>

<pre><code>&lt;head&gt;
&lt;script type="text/javascript"&gt;

function hide_menu(id){document.getElementById(id).style.display = "none";}
function show_menu(id){document.getElementById(id).style.display = "block";}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="div1" onclick="if (document.getElementById('div1hidden').style.display=='none') show_menu('div1hidden'); else hide_menu('div1hidden');"&gt;&lt;/div&gt;

&lt;div class="div2" onclick="if (document.getElementById('div2hidden').style.display=='none') show_menu('div2hidden'); else hide_menu('div2hidden');"&gt;&lt;/div&gt;

&lt;div class="div3" onclick="if (document.getElementById('div3hidden').style.display=='none') show_menu('div3hidden'); else hide_menu('div3hidden');"&gt;&lt;/div&gt;

&lt;div class="div4" onclick="if (document.getElementById('div4hidden').style.display=='none') show_menu('div4hidden'); else hide_menu('div4hidden');"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>Thanks in advance</p>

<p>Rick</p>
