JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div id="accord" data-role="collapsible-set" border-radius="0px"></div>

JavaScript

$(document).on("pageinit", function () {
    var data = [{
        "name": "Name 1",
            "id": "Name1"
    }, {
        "name": "Name 2",
            "id": "Name2"
    }];

    $.each(data, function (index, value) {
        var div = '<div data-role="collapsible"  class="custom-collapsible"  ';
        if (index == 0) div += 'data-collapsed="false"';
        div += '>';

        div += '<h3 style:"padding:0px; margin:0px;"> ' + value.name + '</h3>\
                        <div class= "collapsable-limit-theme">\
                            <div data-role="content" style="padding:0px; margin:0px;">\
                                <div class="ui-grid-c, Grid" id="Grid' + value.id + '"><p>Collapsible content</p>\
                                </div>\
                            </div>\
                        </div>\
                    </div>';

        $($('#accord'), this).append(div).collapsibleset();
    });
    $(".ui-collapsible-heading-toggle").on("click", function () {
        var collapsible = $(this).closest(".ui-collapsible");
        if (collapsible.hasClass("ui-collapsible-collapsed")) {
            $(".ui-collapsible").not(collapsible).trigger("collapse");
        } else {
            return false;
        }
    });
});