Div's Open/Close with FadeIn Effects
<pre><code>    &lt;html&gt;
    &lt;head&gt;
    &lt;script type="text/javascript" src="jquerynew.js"&gt;&lt;/script&gt;  
       &lt;script type="text/javascript"&gt;
     $(document).ready(function()
     {
    $(".home").click(function(event)
    {
       $(".hout").slideToggle("slow");      
    });

    $(".javascrpt").click(function(event)
    {
       $(".jout").slideToggle("slow");
    }); 
});
&lt;/script&gt;
    &lt;style&gt;
     .menu { margin:0px auto; border:1px solid lightgray; height:30px; width:1000px;background:#FFF;} 
     #page-content { margin:0px auto; width:1000px; border:1px solid green; margin-top:4px; background:#FFF; overflow:auto; height:500px; }
     .home {padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;}
     .javascrpt { padding-left:19px; padding-right:29px; padding-top:2px; float:left; border-right:1px solid lightgray;  }
     .jout { display:none; padding:20px; }
     .hout { display:none; padding:20px; }
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div class="menu"&gt;
          &lt;div class="home"&gt;Home&lt;/div&gt;
          &lt;div class="javascrpt"&gt;Javascript&lt;/div&gt;
          &lt;div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;"&gt;jQuery&lt;/div&gt;
          &lt;div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;"&gt;AJAX&lt;/div&gt;
          &lt;div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;"&gt;jQuery + PHP&lt;/div&gt;
          &lt;div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;"&gt;AJAX+ PHP&lt;/div&gt;
          &lt;div style="padding-left:19px;padding-right:29px;padding-top:2px;float:left;border-right:1px solid lightgray;"&gt;jQuery + AJAX + PHP&lt;/div&gt;  
    &lt;/div&gt;  

    &lt;div class="hout"&gt; Home Content goes here&lt;/div&gt;
    &lt;div class="jout"&gt; Javascript Content goes here&lt;/div&gt;

    &lt;/body&gt;

    &lt;/html&gt;
</code></pre>

<p>I have Home | Javascript | jQuery | AJAX etc.,</p>

<p>I need my code to work like </p>

<p>when I click home, "hout" div should open with fadeIn effect</p>

<p>when I click javascript, "jout" div should open with fadeIn effect and "hout" div should close.</p>

<p>when I click jQuery, "jqout" div be opened and previous opened div be closed.</p>

<p>I couldn't get the code to hide/close the previous opened div's. Can anyone suggest me with some guidelines</p>
