title: How can I get toggle to collapse?
body: <p>I have a working toggle function that expands and collapses but my list when expanded is very long and I wanted to put a "Close" link at the bottom to enable collapse so my users don't have to scroll to top to click and collapse. Any ideas how I can modify this code to expand it's functionality for my purposes?</p>
  
  <pre><code>&lt;script language="javascript"&gt;
  $(function(){
  $(".formname").toggle(function(){
  var id=$(this).attr('id');
  $("#form"+id).fadeIn('slow');
  },function(){
  var id=$(this).attr('id');
  $("#form"+id).fadeOut('slow');
  }); 
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>my html looks like:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href="#" id="formxyz" class="formname"&gt;My Expanding/Collapsing Data&lt;/a&gt;&lt;/li&gt;
  &lt;div style="display:none;"&gt;
  &lt;ul&gt;
  &lt;li&gt;Content&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>if I insert the same link li at the bottom before the closing ul the user has to click it twice to collapse. I'd prefer a single click solution.</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href="#" id="formxyz" class="formname"&gt;My Expanding/Collapsing Data&lt;/a&gt;&lt;/li&gt;
  &lt;div style="display:none;"&gt;
  &lt;ul&gt;
  &lt;li&gt;Content&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" id="formxyz" class="formname"&gt;Close&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>