jQuery slideToggle parent and children
<p>Here is my code</p>

<pre><code>&lt;li class="page_item "&gt;&lt;a href="javascript:"&gt;A&lt;/a&gt;
&lt;ul class="children"&gt;
    &lt;li class="page_item"&gt;&lt;a href=""&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item"&gt;&lt;a href=""&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li class="page_item "&gt;&lt;a href=""&gt;B&lt;/a&gt;
&lt;ul class="children"&gt;
    &lt;li class="page_item"&gt;&lt;a href=""&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item"&gt;&lt;a href=""&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item"&gt;&lt;a href=""&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item"&gt;&lt;a href=""&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;

&lt;li class="page_item "&gt;&lt;a href=""&gt;C&lt;/a&gt;
&lt;ul class="children"&gt;
    &lt;li class="page_item"&gt;&lt;a href=""&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item"&gt;&lt;a href=""&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item"&gt;&lt;a href=""&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item"&gt;&lt;a href=""&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;

$('.page_item').click(function(){

    $('ul.children').slideToggle();
 });
ul.children{
  display: none;
}
</code></pre>

<p>online sample <a href="http://jsfiddle.net/kHLuR/" rel="nofollow">http://jsfiddle.net/kHLuR/</a></p>

<p>How can I make like that, when I click A section, just to open A section's children when I click B, just show B's. not open the whole sections opened.
Thanks</p>
