I don't mean to be rude, but since the accordion is what doesn't seem to be working then that code may be useful as reference for your question.
There are a couple of possible reasons for why it may not work:
- The code just doesn't do what you want.
- The code isn't being executed.
- The code is being executed at an incorrect time.
- Somehow onsen is interfering with the execution or resets it afterwards.
We can check 1 off since you're saying it works under other circumstances.
To check for 2 you just need a console.log, which I'm guessing you already did.
You said that you tried moving the script, so I'm guessing you were also suspecting option 3. Whether it's in a separate file is not of a very big importance. However when it's executed is what is important. Lets say for example that your frontpage.html is a page with a html, head, body etc. Some time ago people were putting scripts at the end of the body so that they will be executed after the page is loaded. When jQuery became mainstream though it's way of using either $(function(){ ... }) or $(document).ready(function(){ ... }). I would guess that you're using one of those.
However those would work for ensuring the DOMContentLoaded event has already been fired. In your case though since you already loaded the page which contains the sliding-menu that means that at that point the main page has already been loaded. You said that you looked at the DOM tree - if you looked using inspect element instead of show source you probably saw that the inner pages are not inside frames or iframes. Therefore they were just put inside the page as random html content, and not as separate html pages. So basically when the $(readyFunction) becomes executed at that point from the browser's perspective the page has already been loaded.
If that code is before the actual accordion then that means it may be executed before that. And about the errors - jQuery and it's plugins aren't very font of errors. Since jQuery's selection has the ability to match any amount of elements that includes 0. So even if you do something like
$('#accordion').activateAccordion();
that's fine because even if it finds 0 elements it just works with that set of 0 elements and activates each one of them. :D
If this is what's happening you can debug it by console.logging the number of matched elements. You can fix it by either moving your script to the end of the body, or even including it in the main page. The way Onsen works is that it doesn't require actual html pages for it's sliding-menus and similar components. You can just have the html which you need for content. (There's also a component ons-template which helps if you want to add multiple subpages in one file.)
Anyway if you decide to go for the one-page approach then you can use an event init which pages fire. Otherwise you can just have your script after the content.
Honestly I think option 3 is the most likely one.
However if you find that your jQuery selector finds your accordion element and does what it needs to then you should check again what happens after that with some console.logs.
I hope I was of some help. Good luck with your app!
