title: Show/Hide script using javascript
body: <p>I have a show/hide script that I am using for a menu. When I click a main link it brings up a list below it. I was wondering if there is a way to alter it a bit so that when I click the link it opens but when I click the next one it closes the other one instead of leaving them all open unless you click it again to close.</p>
  
  <p>Here is my script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function toggle_visibility(id) {
         var e = document.getElementById(id);
         if(e.style.display == 'block')
            e.style.display = 'none';
         else
            e.style.display = 'block';
      }
  &lt;/script&gt;
  
  
  &lt;a href="#" onclick="toggle_visibility('list1');"&gt;
         &lt;p&gt;List One&lt;/p&gt;
         &lt;/a&gt;
         &lt;div id="list1" style="display:none;"&gt;
           &lt;ul&gt;
             &lt;li&gt;Item One&lt;/li&gt;
             &lt;li&gt;Item Two&lt;/li&gt;
             &lt;li&gt;Item Three&lt;/li&gt;
           &lt;/ul&gt;
         &lt;/div&gt;
  </code></pre>