title: Lists using CSS and JavaScript
body: <p>I am learning JavaScript and CSS and got stuck somewhere-</p>
  
  <p>I have three different lists top_menu, submenu3 and submenu4, when I click on item no 3 I want submenu 3 to show up and when I click on item no 4 I want submenu4 to show up and submenu3 should vanish.
  My HTML Code is-</p>
  
  <pre><code>&lt;ul id="top_menu"&gt;
      &lt;li onclick="arrow(1)"&gt;&lt;a href="#"&gt;item no 1&lt;/a&gt;
      &lt;/li&gt;
      &lt;li onclick="arrow(2)"&gt;&lt;a href="#"&gt;item no 2&lt;/a&gt; 
      &lt;/li&gt;
      &lt;li onclick="arrow(3)"&gt;&lt;a href="#"&gt;item no 3&lt;/a&gt;
      &lt;/li&gt;
      &lt;li onclick="arrow(4)"&gt;&lt;a href="#"&gt;item no 4&lt;/a&gt;
      &lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;ul id="submenu1" style="display:none;"&gt;&lt;/ul&gt;
  &lt;ul id="submenu2" style="display:none;"&gt;&lt;/ul&gt;
  &lt;ul id="submenu3" style="display:none;"&gt;
      &lt;li&gt;&lt;a href="#"&gt;A3&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;B3&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;C3&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;D3&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;E3&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="submenu4" style="display:none;"&gt;
      &lt;li&gt;&lt;a href="#"&gt;A4&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;B4&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;C4&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;D4&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;E4&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and JavaScript implementation for function arrow() is
  function arrow(x) {</p>
  
  <pre><code>    for (i = 1; i &lt;5; i++) {
  
          if (i==x) {
              document.getElementById("submenu"+i).style.display = "block";
          }
  
          else {
           document.getElementById("submenu"+i).style.display = "none";
          }
  
      }
  }
  </code></pre>
  
  <p>Could someone tell where the mistake is?
  Thanks!</p>