How do I control the operation of a page from a layer (iframe) on that page?

How do I control the operation of a page from a layer (iframe) on that page?

Hi folks,

This questions involves Fancybox, but as I think its solution lies with jQuery I'm posting it here - apologies in advance if I'm mistaken.

I'm using fancybox as part of an editor - the parent page lists a set of quiz questions, laid out and controlled in an accordian-type format by the script:

$('.accord> h4').click(function() {
        $(this).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast');
});   

When any one of those questions is clicked, an editing form is launched, via an iframe, into a Fancybox "layer".

When the question is saved in that Fancybox-contained form, the parent list is updated (via ajax) to reflect the changes (and the fancybox layer is closed).
 












My problem is that I cannot get the script that turns the list into an accordian-type list to run.

The relevant code that is run when the form's contents are saved is:



parent.$('.accord> div').hide();
parent.$('.accord> h4').click(function() {
    $(this).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast');
});

This variant of my code formats the list appropriately, but when I subsequently click on the h4 links on the newly refreshed (and formatted) list on the parent page,I get the error:







$ is not defined
$ (this).next('div').slideToggle...ings('div:visible').slideUp('fast');


What am I missing here?  I'd appreciate a nudge in the right direction if possible.

Thanks,

Bruce