JQMobile dynamic themes

Toggle themes

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<html>
<head><title>jQuery Mobile Test</title></head>
<body>
    <div id="page" data-role="page">
        <div data-role="header">
            <h1>jQuery Mobile</h1>
        </div>
        <div data-role="content">
            <a href="#" id="toggle-collapsible" data-role="button">Toggle collapsible</a>

            <div id="collapsible" data-role="collapsible">
                <h3>Heading</h3>
                Place content here
            </div>
            
            
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
</body>
</html>

JavaScript

$(document).bind('mobileinit', function() {
    // handle mobileinit here
});

$(function() {
    $('#page').bind('pageinit', function(e, data) {
        // initialize page
        var $page = $(this);
        $('#toggle-collapsible').click(function() {
            var $collapsible = $('#collapsible'),
                isCollapsed = $collapsible.find('.ui-collapsible-heading-collapsed').length > 0;

            $collapsible.trigger(isCollapsed ? 'expand' : 'collapse');
        });
    });
});

// have to manually write script tag since jsFiddle loads external 
// scripts before our code and we need to bind to mobilinit before
// jquery.mobile is loaded
document.write('<scr' + 'ipt type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></sc' + 'ript>');