Jquery accordion does not work when I put the script in script file on a master page, but it does when I put it directly on the page.

Question

I have a page called Default.aspx which inherits from a master page called Main.master.

In Main.master, I have a asp:ScriptManager and within the script manager, I put the jQuery 1.4 library, jquery 1.7.2 ui library, I also put a custom js file I created which for now just has the code:

$("#accordion").accordion({
    collapsible: true,
    autoHeight: false
});

When I load default.aspx, it is loading all the javascript files, but the accordion div is not being rendered into an accordion. If I put the code above directly between script tags on default.aspx, the accordion renders, so I am assuming it has something to do with it not recognizing the accordion id, but correct me if I am wrong.

Answer 1

Im goign to guess your DOM isnt ready when you call the accordian in the external file but it is when you call it in the script tags. did you wrap it in $(document).ready(function(){});?

Answer 2

I have the exact same problem with jQuery 1.4 and accordion. I have a hidden pane, and when I show that pane it's not an accordion... and yes, I have the call to the accordion inside $(document).ready(function(){});

My solution was to call the accordion every time I show the hidden pane, but that seems overambitious.

Cheers