I have Jquery and Kendo loading in the head...
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
Then I try to add a collapsible to a view like so....
<!--Feature View-->
<div id="feature"
data-role="view"
data-title="UnFairgettable" >
<div data-role="header" class="top-strip">
<a id="backbutton" data-role="backbutton" data-click="onClick" data-transition="slide"><img src="styles/images/back-icon.png"/></a>
<a id="homebutton" data-role="button" href="#/" data-transition="slide"><img src="styles/images/home-icon.png"/></a>
</div>
<div class="navigation">
<h1>
This is the Feature Page
</h1>
</div>
<div id="collapsible" data-role="collapsible">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
.....And the collapsible does not have kendo styling
When i check firebug "kendo.mobile.min.js" is loading fine. And jQuery is only being loaded once.
If I try...
$("#collapsible").kendoMobileCollapsible();
...on deviceready I get an error in firebug...
app.js:12 Uncaught TypeError: $(...).kendoMobileCollapsible is not a function.
This is my app.js...
(function (global) {
var app = global.app = global.app || {};
document.addEventListener('deviceready', function () {
// rotate and lock orientation to portrait
//window.screen.lockOrientation('portrait');
navigator.splashscreen.hide();
app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout", skin: 'flat' });
$("#collapsible").kendoMobileCollapsible();
}, false);
})(window);
...I'm running out of ideas as to what this would be.