I got some code that loads divs from other web pages into a particular div in my main page.  In other words, I click on a button, and this tells jquery to load a fragment of a particular page into my main page.  For instance if I have 5 web pages on rock stars, I could have 5 buttons, and each button could load one rock star's biography into a div on the main page (and replace whatever was there before).

  This works, and I do see the content that it loaded.  But when I do 'view source' in IE, I do not see that content (the bio of the rock star). 

Another clue that this content is not really there, is when I try and run some code on that content.

The content (from those external pages) have divs with specific names, and I try and make them into collapsible panels by running the following short function:

 

        var IdentifyPanels = function() {
            $("DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand").toggle(
                function() {
                    $(this).parent().next("div.Content").show("slow");
                    $(this).attr("class", "ArrowClose");
                },
                function() {
                    $(this).parent().next("div.Content").hide("slow");
                    $(this).attr("class", "ArrowExpand");
                }
             )
        }
The idea is to make each biography into a collapsible panel.

The function (above) attaches a toggle event to every div of class 'arrowexpand'

This div is found in those biographie's html that has been loaded from external pages by jquery (into the main page).

 

In other words, I'm trying to attach an event, using jquery, to HTML divs that have been loaded in an unusual way.

The function attaching the events do run, but the events simply don't work.  My guess is that jquery is simply not finding the divs. 

 

Am I correct?  Is this some fundamental principle about jquery and javascript?

 

Here is the code that actually loads the divs from the other pages into the main page.

$(document).ready(function() {

/* attach an event to each button of biographies: */

        $('#content').hide('fast', loadContent); /*this calls all the other funcs*/
        $('#load').remove();
        $('#wrapper2').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        function loadContent() {
            $('#content').load(toLoad, '', showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal', hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
            IdentifyPanels();
        }
    $("#aFoundingFathers").trigger("click");
});

I should say that the code for collapsible panels does work if inserted into an ordinary web page that does no loading.

This is the second type of collapsible panel that I've tried, the earlier one used other jquery methods.  This one is simpler, but it just doesn't work here. 

Any help is appreciated.