Dynamic div with jQuery that shows content on click
<p>I've been trying to work out the demo at this site <a href="http://www.designgala.com/demos/collapse-expand-jquery.html" rel="nofollow">http://www.designgala.com/demos/collapse-expand-jquery.html</a></p>

<p>I'm having issues though.
here's the code:</p>

<pre><code>jQuery(document).ready(function() {
 jQuery(".content").hide();
 jQuery(".heading").click(function()
 {
  jQuery(this).next(".content").slideToggle(500);
 });
});


var el = document.createElement('div');
el.className = "heading";
el.innerHTML = "whatever you want";
$('.listResults').append(el);


var el2 = document.createElement('div');
el2.className = "content";
el2.innerHTML = "whatever you want shown";
$('.listResults').append(el2);
jQuery(".content").hide();
</code></pre>

<p>html has a div class called listResults which everything gets appended to. Currently the jaavscript is ran after the load so i'm calling the jqeury.hide on .content one's its generated.</p>

<p>The problem is that when i click one of the header divs it doesn't drop down the content. Any ideas?</p>
