title: jQuery non-UL Accordion / Need header div seperate from content div
body: <p>I have found exactly what I need on the jQuery UI examples: <a href="http://jqueryui.com/demos/accordion/" rel="nofollow noreferrer">Collapsable Content Accordion</a>. </p>
  
  <p>The problem is that I need a content-div to slideToggle via a menu-button-div. Every example and tutorial I find requires that you have the header directly above the content. This makes research tricky.</p>
  
  <p>Two problems ::: Getting a double call to the slide effect and cannot figure out how to circumvent it. I also cannot get the content-div to collapse when the associated menu-button-div is clicked.</p>
  
  <p>This example will make the problem clear.
  <a href="http://jsfiddle.net/4a5WL/" rel="nofollow noreferrer">http://jsfiddle.net/4a5WL/</a></p>
  
  <pre><code>$('#menu1').click(function() {
  $(".class1").slideUp(function() {
    $('#collapse_about').slideDown(400);
     });
    });
  
   $('#menu2').click(function() {
  $(".class1").slideUp(function() {
    $('#collapse_newsletter').slideDown(400);
     });
    });
  
   $('#menu3').click(function() {
  $(".class1").slideUp(function() {
    $('#collapse_contact').slideDown(400);
     });
    });
  </code></pre>