JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

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.10.2.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="pageone">
    <div data-role="header">
         <h1>Collapsible Blocks</h1>

    </div>
    <div data-role="main" class="ui-content">
        <div class="cloneme" data-role="collapsible">
             <h1>Click me - I'm collapsible!</h1>
             <p>I'm the expanded content.</p>
        </div>
        </div>
        <div data-role="footer">
             <h1>Insert Footer Text Here</h1>

        </div>
    </div>

JavaScript

$(function () {
    var clone = $(".cloneme").clone();
    $('.ui-content').append(clone);
    clone.addClass('ImAClone');
    clone.find('.ui-collapsible-heading-toggle').children().unwrap();
    clone.find('.ui-collapsible-heading-status').remove();
    clone.find('.ui-collapsible-content').children().unwrap();
    clone.collapsible();
});