title: vertical drop down menu displays sub menu and when clicking on another menu item closes the previous menu item
body: <p>i have a section in the content area of my site that has a list of links that have sublinks in them.</p>
  
  <p>so that the users click the least amount as possible, i figured a drop down menu would be best, then that link would take them into the page, etc.</p>
  
  <p>i know nothing about javascript or jquery so all the examples i find are little to no use to me because i don't even know where to begin to modify them to suit my needs.</p>
  
  <p>what i would like to have happen:
  when a user clicks the link a list drops down from it with all the sub pages. </p>
  
  <p>PAGE LINK 1<br/>
   |--sub page<br/>
   |--sub page</p>
  
  <p>PAGE LINK 2<br/>
   |--sub page<br/>
   |--sub page</p>
  
  <p><strong>jsFiddle link: <a href="http://jsfiddle.net/hHn7b/" rel="nofollow">http://jsfiddle.net/hHn7b/</a></strong></p>
  
  <p>the only thing i need it to do is while it does toggle the display of the sub pages, i need it to also when another link is clicked it will close the previously opened drop down menu.
  (think along the lines of how a radio button functions)</p>
  
  <p>i am not scared to use javascript or even that jquery stuff on this if i need to, but i don't know enough to do it myself, and i don't have the time currently to attempt and learn how to or even enough to modify other's jquery code they post on other questions in this site.</p>
  
  <p>Below is the code from the jsFiddle:</p>
  
  <hr>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="dl_parent"&gt;&lt;span onclick="toggle_visibility('dl_sub_dd');"&gt;PAGE LINK 1&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="dl_sub_dd"&gt;
      &lt;ul&gt;
          &lt;li&gt;sub page&lt;/li&gt;
          &lt;li&gt;sub page&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!--end dept_links_sub--&gt;
  &lt;div class="dl_parent"&gt;&lt;span onclick="toggle_visibility('dl_sub_dd1');"&gt;PAGE LINK 2&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="dl_sub_dd1"&gt;
      &lt;ul&gt;
          &lt;li&gt;sub page&lt;/li&gt;
          &lt;li&gt;sub page&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>span {
      cursor:pointer;
  }
  #dl_sub_dd, #dl_sub_dd1 {
      display:none;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>function toggle_visibility(id) {
      var e = document.getElementById(id);
      if (e.style.display == 'block') e.style.display = 'none';
      else e.style.display = 'block';
  }
  </code></pre>