Javascript if else statement to hide and show div
<p>Please refer to the following codes :</p>

<pre><code>&lt;div id="message-1" onclick="javascript:showresponddiv(this.id)&gt;
&lt;/div&gt;
&lt;div id="respond-1" style="display:none;"&gt;
&lt;/div&gt;
&lt;div id="message-2" onclick="javascript:showresponddiv(this.id)&gt;
&lt;/div&gt;
&lt;div id="respond-2" style="display:none;"&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
function showresponddiv(messagedivid){
    var responddivid = messagedivid.replace("message-", "respond-");
    if (document.getElementById(responddivid).style.display=="none"){
        document.getElementById(responddivid).style.display="inline";
    } else {
        document.getElementById(responddivid).style.display="none";
    }
}
&lt;/script&gt;
</code></pre>

<p>The codes above already success make the respond div appear when user click on message div. The respond div will disappear when user click on message div again. Now my question is how to make the respond div of 1st message disappear when user click on 2nd message to display the respond div of 2nd message?</p>
