title: onclick open sub menu, on click close sub menu?
body: <p>On this page <a href="http://kimcolemanprojects.com/" rel="nofollow noreferrer">http://kimcolemanprojects.com/</a> I need to have a drop down menu that opens on click and closes again on click of same anchor. Like it works on this site <a href="http://angela-moore.co.uk/" rel="nofollow noreferrer">http://angela-moore.co.uk/</a></p>
  <p>This is my html for the menu so far:</p>
  <pre><code>&lt;div class=&quot;left&quot; id=&quot;nav&quot;&gt;
  &lt;ul id=&quot;menu&quot;&gt;
  &lt;li id=&quot;light&quot;&gt;
  &lt;a href=&quot;lighting_video.html&quot;&gt;Lighting + Video&lt;/a&gt;
     &lt;ul style=&quot;display: none;&quot;&gt;
       &lt;li&gt;&lt;a href=&quot;django_django.html&quot;&gt;Django Django&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href=&quot;suntrap.html&quot;&gt;Suntrap&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li id=&quot;photo&quot;&gt;
  &lt;a href=&quot;photograms.html&quot;&gt;Photograms&lt;/a&gt;
  &lt;/li&gt;
  &lt;li id=&quot;about&quot;&gt;
  &lt;a class=&quot;active&quot; href=&quot;about.html&quot;&gt;About&lt;/a&gt;
  &lt;/li&gt;&lt;/ul&gt;
  &lt;/div&gt;&lt;!--end nav--&gt;
  </code></pre>
  <p>As you can see I only need it to work within one list item. I need help writing the Javascript for this.</p>
  <p>So when on index page the user can see three links lighting + video, Photograms, About. When user clicks on lighting + video a sub menu opens beneath with more links. Then it will close again if the user clicks again on lighting + video.  The same can happen with each of the initial three links on the index page.</p>