JSFiddle - React, Tailwind, and code Playground

by tolis

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<body>
	<div data-role="page" id="home-page">
           <div data-role="content">
		       <div data-role="collapsible-set" data-theme="b" data-content-theme="d" id="mainColl">
               </div>
           </div>
    </div>
 </body>

JavaScript

$(document).on('pagebeforeshow', '#home-page', function () 
     {
        var collapsibleSet=$("#mainColl");
        var collapsible= $('<div data-role="collapsible"></div>');
		collapsible.append('<h2>Collapsible</h2>');
			
		var list = $('<ul data-role="listview" data-divider-theme="b"></ul>');
		list.append('<li data-role="list-divider">List</li>');
				
		for(var j =0;j<4;j++)
		{
			list.append("<li><a href=\"#\">Item</a></li>");
		}
		collapsible.append(list);
		collapsibleSet.append(collapsible);
        collapsibleSet.trigger('create');
     });

$("#mainColl").on("click","li",function()
    {
        var list = $("<ul>");
		for(var i=0;i<4;i++)
		{
			list.append("<li>test</li>");
		}
		$(this).append(list);
		//$(this).trigger('create');
        $(this).parent().listview('refresh');

	});