I am trying to use the JQuery UI accordion with SilverStripe 2.3.3. It works ok excepted that it does NOT load before the page is
displayed. As a result we first see the "raw" markup (basically a <ul> structure ) before it gets properly styled by the jQuery Accordion library. (so yes the library works , just not initialized properly)

I assume it is another problem with document.ready() but I can't figure it out.

In my php file :

function init() {
parent::init();
Requirements::themedCSS("core");
Requirements::themedCSS("jquery-ui-1.7.2.custom");
Requirements::JavaScript("mysite/javascript/jquery-1.3.2.min.js");
Requirements::JavaScript("mysite/javascript/jquery-ui-1.7.2.custom.min.js");
Requirements::JavaScript("mysite/javascript/ui.accordion.js");
}

The file ui.accordion.js :

;(function($) {
$(document).ready(function() {
jQuery.noConflict();
jQuery("#accordion").accordion({ active: false,
collapsible: true,
autoHeight: false,
header: 'h3' ,
         alwaysOpen: false});
}
);
})(jQuery);

I think this is what is documented in http://doc.silverstripe.org/doku.php?id=jquery#examples.

If I insert an "alert()" in ui.accordion.js just after noConflict(), the message get printed *after* the page is loaded but
of course, the accordion code has not been executed yet.
Please could you tell me what I am doing wrong? I have to mention that I am not a Javascript expert ..so any help would be highly appreciated as I am really puzzled here.

Thanks!

Thanks.
Unfortunately, this is a large project and for consistency reason, I would prefer to keep the structure we have and continue
to use "Requirements" ...

I have the same problem with another Jquery plugins so I assume I must be doing something wrong.
Any idea anyone?
Thanks.