How can I hide a specific <li>'s and show it when a specific <li> is clicked?
<p>What I want to happen is that I want to hide the <code>&lt;li&gt;</code>'s whose <code>parent_id</code> is equals to other <code>&lt;li&gt;</code>'s <code>group_id</code>. And show those <code>&lt;li&gt;</code>s when the <code>'&lt;li&gt;'</code> is clicked?</p>

<p>here is my sample <code>&lt;ul&gt;</code> and it is PHP generated.</p>

<p><img src="http://i.stack.imgur.com/JWqay.png" alt="enter image description here"></p>

<p>PHP Code:</p>

<pre><code>foreach($navs as $nav){
                                            echo '&lt;li parent_id="'.$nav['parent_id'].'" group_id="'.$nav['group_id'].'"&gt;&lt;a href="#'.$nav['group_id'].'" class="scroll" title="'.$nav['nav'].'"&gt;'.$nav['nav'].'&lt;/a&gt;&lt;/li&gt;';
                                        }
</code></pre>

<p>sample output:
<img src="http://i.stack.imgur.com/3Lc6G.png" alt="enter image description here"></p>
