Overlap in between 2 JQuery Click Function
<pre><code>&lt;input id="btnPost" type="button" value="Post" style="width: 79px" /&gt;
&lt;input id="btnAssign" type="button" value="Assign" style="width: 79px" /&gt;
&lt;div id="div1"&gt;
    &lt;textarea rows="10" cols="2" style="width: 401px"&gt;&lt;/textarea&gt;&lt;br /&gt;
    &lt;input id="btnPost2" type="submit" name="btnPost" value="Post" style="width: 60px" /&gt;
&lt;/div&gt;
&lt;div id="div2"&gt;
    &lt;textarea rows="10" cols="2" style="width: 401px"&gt;&lt;/textarea&gt;&lt;br /&gt;
    &lt;input id="btnAssign2" type="submit" name="btnAssign" value="Assign" style="width: 60px" /&gt;    
&lt;/div&gt;
</code></pre>

<h1>JavaScript :</h1>

<pre><code>$(document).ready(function () {
        $('#div1').hide();            

        $('#btnPost').click(function () {
            $('#div1').toggle('fast');                
        });                           
});

$(document).ready(function () {

        $('#div2').hide();           

        $('#btnAssign').click(function () {               
            $('#div2').toggle('fast');               
        });                            
});
</code></pre>

<h2>My query is as follows:</h2>

<p>When I am clicking "Post" button, "#div1" is appearing. But when I am clicking "Assign" button without minimizing "div1" then both "#div1" and "#div2" are displaying at the same time.</p>

<p>I tried in www.jsFiddle.com
for more detail follow this link : <a href="http://jsfiddle.net/RfgkU/69/" rel="nofollow">http://jsfiddle.net/RfgkU/69/</a></p>
