Kendo UI elements not styled

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.