How to select an element within a jquery dialog
<p>let me start by qualifying that I am very new to jquery. I've been using it for a month or so now with moderate success. I'm hoping my question is easily answered.</p>

<p>Basically, I have a dialog on a page that contains content that is generated within a DWR Ajax call. What I want to do is define a couple of divs in my content such that when a header div is clicked, the second div tag referenced by the first needs to be hidden / shown via the jquery slideToggle function on the referenced div. Try though I might however, I am unable to get this method to be called. </p>

<p>Here is the javascript method I am calling, please note that for testing purposes I have omitted the dwr ajax call and am manually setting the html in the showdialog method.</p>

<p>The dialog opens fine and displays my content as expected. However clicking the div containing the expansion-header class does not toggle the view of the referenced 'ELEMENT_ONE' div. </p>

<p>Any thoughts or comments would be most appreciated. I am sure I am doing something silly, but for the life of me I can't work it out.</p>

<p><strong>Javascript</strong></p>

<pre><code>function showdialog() {

var data = '&lt;DIV class="expansion-header" reference="ELEMENT_ONE"&gt;'
        + '&lt;B&gt;Click to Toggle Element One&lt;B&gt;&lt;/DIV&gt;' 
        + '&lt;DIV id="ELEMENT_ONE" name="ELEMENT_ONE"&gt;'
        + 'This is element ones text it contains a&lt;BR&gt;few lines of gibberish.&lt;BR&gt;&lt;BR&gt;'
        + 'This is the second paragraph to be hidden when the header is clicked&lt;/DIV&gt;';

  $("#StatusDialog").html(data);
  $("#StatusDialog").dialog("open");   
}

$(document).ready(function() {

  $(".expansion-header").click(function () {
    var reference = $(this).attr('reference');
    $("#" + reference).slideToggle(400);
  });

  $("body").append('&lt;div id="StatusDialog" title="Dialog Title"&gt;&lt;/div&gt;');
  $("#StatusDialog").dialog({  
    autoOpen: false,    
    resizable: true,
    width: 750,
    modal: false           
  });    
});
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="status" class="status" style="cursor: pointer; cursor: hand;" onclick="showdialog()"&gt;Click Me&lt;/div&gt;
</code></pre>
