JSFiddle - React, Tailwind, and code Playground

by foalea

HTML

<div data-role="page" id="page1">
     <div data-role="header"  data-position="fixed" data-tap-toggle="false">
        <h1>My page</h1> 
    </div> 	
    <div role="main" class="ui-content">
        <button type="button" data-icon="gear" data-iconpos="right" data-mini="true" data-inline="true" id="add">Add</button>
        <button type="button" data-icon="plus" data-iconpos="right" data-mini="true" data-inline="true" id="expand">Expand last</button>
        <button type="button" data-icon="minus" data-iconpos="right" data-mini="true" data-inline="true" id="collapse">Collapse last</button>
        <div data-role="collapsibleset" data-content-theme="a" data-iconpos="right" id="set">
            <div data-role="collapsible" id="set1" data-collapsed="true">
                <h3>Section 1</h3>
                <p>I'm the collapsible content.</p>
            </div>
        </div>
    </div> 
 </div>

JavaScript

$( document ).on( "pagecreate", function() {
    var nextId = 1;
    $("#add").click(function() {
        var curNumOfDivs = $('#set [data-role="collapsible"]').length;
        if (curNumOfDivs > 4){
            alert("You have exceeded tha max allowed collapsibles!");
            return false;
        }
        nextId++;
        var content = "<div data-role='collapsible' id='set" + nextId + "'><h3>Section " + nextId + "</h3><p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p></div>";
        $( "#set" ).append( content ).collapsibleset( "refresh" );
    });
    $( "#expand" ).click(function() {
        $("#set").children(":last").collapsible( "expand" );
    });
    $( "#collapse" ).click(function() {
        $( "#set" ).children( ":last" ).collapsible( "collapse" );
    });
});