JSFiddle - React, Tailwind, and code Playground

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed">
         <h1>hello</h1>
    </div>
    <div role="main" class="ui-content" id="targetContent">
        <div id="thelist" data-role="collapsibleset" data-theme="a" data-content-theme="a">       
        </div>   
    </div>
</div>

JavaScript

$(document).on("pagecreate", "#page1", function(){
    var liste = $('#thelist');
    var AllDynamicPages = '';
    $.each(daten.posts, function(index1, data) {
        var postid = data.id;
        var postTitle = data.title;
        var postContent = data.content;        
        for (var i = 0; i< data.categories.length; i++) {
            var catid = data.categories[i].id;     
            var catTitle = data.categories[i].title;            
            //see if we already have this category, if not create new collapsible
            var $cat = $("#cat" + catid);
            if ($cat.length == 0){
                $cat = $('<div id="cat' + catid + '" data-role="collapsible"><h3>' + catTitle + '</h3><ul data-role="listview"></ul></div>');   
                liste.append($cat);
            }
            
            //create post link in category collapsible list
            var postlink = '<li><a href="#page' + postid + '">' + postTitle + '</a></li>';
            $cat.find("ul").append(postlink);
            
            AllDynamicPages += '<div data-role="page" data-add-back-btn="true" id="page' + postid + '"><div data-role="header"><h1>' + postTitle + '</h1></div><div data-role="content">' + postContent + '</div></div>'
        }        
    });        
    liste.enhanceWithin();
    $("body").append(AllDynamicPages);
});


var daten = {
"status": "ok",
"count": 10,
"count_total": 20,
"pages": 2,
"posts": [
    {
        "id": 86,
        "type": "post",
        "slug": "inaktiviert",
        "url": "http://localhost/wordpress/?p=86",
        "status": "publish",
        "title": "Post 1 Cat1",
        "content": "his is content for Post1 Cat 1.",
        "date": "2014-03-04 15:09:51",
        "modified": "2014-03-04 15:09:51",
        "categories": [
            {
                "id": 1,
                "title": "Category 1",
                "description": "",
                "parent": 0,
                "post_count": 4
            }
        ],
    },
   ...