i want to show all list items instead of one item
<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;link rel="stylesheet" type="text/css" href="mango.css"&gt;
        &lt;script&gt;
            function mango(){
                document.getElementById("apple").style.display="block";
            }
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;
    &lt;ul id="main" onclick="mango()"&gt;main1
        &lt;li id="apple"&gt;sub1&lt;/li&gt;
         &lt;li id="apple"&gt;sub2&lt;/li&gt;
         &lt;li id="apple"&gt;sub3&lt;/li&gt;
    &lt;/ul&gt;
     &lt;ul id="main"&gt;main2
        &lt;li&gt;sub11&lt;/li&gt;
         &lt;li&gt;sub2&lt;/li&gt;
         &lt;li&gt;sub11&lt;/li&gt;
    &lt;/ul&gt;
&lt;/html&gt;
</code></pre>

<p>associated CSS:</p>

<pre><code>#main li{
    list-style-type: none;
    display: none;
}
</code></pre>

<p>in the given program, when i click on main1 which on display the first list item,instead of that i want to display all list items under that.can you help me?</p>