title: Click to expand, collapse all others when clicked
body: <p>I've had a lot of success with the following jquery function. It allows you to hide content until the title is clicked, then it expands the ul item.  I love this feature, however I'd really like only one ul to be open at a time. How can I make it so that when a title is clicked, it expands that one, and collapses all the rest that are open?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          setTimeout(function() {
              // Slide
              $('#expandable_menu &gt; ul &gt; a.expanded + li').slideToggle('slow');
              $('#expandable_menu &gt; ul &gt; a').click(function() {
                  $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('&gt; li').slideToggle('slow');
              });
  
          }, 250);
      });  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's the structure of the stuff that expands and collapses.</p>
  
  <pre><code>&lt;ul id="expandable_menu" class="expandable_menu"&gt;
  
       &lt;ul&gt;
           &lt;a class="expanded"&gt;TITLE&lt;/a&gt;
       &lt;li class="expandablemenu" "&gt;
            &lt;ul&gt;
                     &lt;li&gt;
                          &lt;div&gt; This is where the content goes &lt;/div&gt;
                      &lt;/li&gt;
            &lt;/ul&gt;
       &lt;/li&gt;
        &lt;/ul&gt;
  
       &lt;ul&gt;
           &lt;a class="expanded"&gt;TITLE&lt;/a&gt;
       &lt;li class="expandablemenu" "&gt;
            &lt;ul&gt;
                     &lt;li&gt;
                          &lt;div&gt; More content! &lt;/div&gt;
                      &lt;/li&gt;
            &lt;/ul&gt;
       &lt;/li&gt;
        &lt;/ul&gt;
  
  &lt;/ul&gt;
  </code></pre>