JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed">
        	<h1>home page</h1>

    </div>
    <!-- /header -->
    <div data-role="content"></div>
    <!-- /content -->
    <div data-role="footer" data-position="fixed">
        	<h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>

JavaScript

var col = '<div data-role="collapsible-set"><div data-role="collapsible" data-collapsed="false"> <h3>Section 1</h3><p>I am the collapsible set contentfor section 1. </p><ul data-role="listview"><li><a href="acura.html">Acura</a></li><li><a href="audi.html">Audi</a></li><li><a href="bmw.html">BMW</a></li></ul></div><div data-role="collapsible"><h3>Section2</h3><p>I am the collapsible set content for section 2. </p></div ></div>';
$('[data-role=content]').append(col);
$('[data-role=collapsible-set]').collapsibleset().trigger('create');