JSFiddle - React, Tailwind, and code Playground

by murray_3

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css">
<script>
		$(document).on("pageinit", function() {
			var nextId = 1;

			$("#add").click(function() {
				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").trigger( "expand" );				$("#set21").children(":last").trigger( "expand" );
			});

			$("#collapse").click(function() {
				$("#set").children(":last").trigger( "collapse" );
			});
		});
	</script>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="content" class="jqm-content">
 <div>   
<button type="button" data-icon="gear" data-theme="b" data-iconpos="right" data-mini="true" data-inline="true" id="add">Add</button>
<button type="button" data-icon="plus" data-theme="b" data-iconpos="right" data-mini="true" data-inline="true" id="expand">Expand last</button>
<button type="button" data-icon="minus" data-theme="b" data-iconpos="right" data-mini="true" data-inline="true" id="collapse">Collapse last</button>
<div data-role="collapsible-set" data-inset="false" data-content-theme="c" id="set">
    <div data-role="collapsible" id="set1" data-inset="false">
        <h4>Section 1</h4>
        <div class="fildiv"><p><strong>By: </strong>User_1234 <strong>| At: </strong> 4:48<strong> | On:</strong> 13/10/21013</p></div>
        <p><strong>Test Contention</strong></p>
        <img...

CSS

/* JQM Demos CSS */
.jqm-demos strong { font-weight: bold; }
.jqm-demos img { max-width: 100%; }

/* Page */
body, .jqm-demos  {
	background-color: #fefefe;
	font-size: 1.05em;
}

/* Header */
.jqm-header {
	background: #fff;
	border-top: 3px solid #6ABA2F;
	border-bottom: 1px solid #e0e0e0;
	color: #777;
	text-shadow: 0 1px 0 #fff;
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,.15);
	box-shadow: 0 0 5px rgba(0,0,0,.15);
}
.jqm-header.ui-header-fixed:not(.ui-fixed-hidden) {
	border-top-width: 4px;
	padding-top: 0;
}

/* Header logo */
.jqm-header h1.jqm-logo {
	font-size: 1em;
	margin: .6em 3.375em;
}
.jqm-header .jqm-logo a {
	display: inline-block;
	text-decoration: none;
	min-height: 40px;
}
.jqm-header .jqm-logo img {
	display: block;
	width: 140px;
	height: auto;
}
.jqm-demos-home .jqm-header .jqm-logo img {
	display: inline-block;
}

/* Header buttons */
.jqm-header > .ui-btn {
	width: 31px;
	height: 31px;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.jqm-header > .ui-btn,
.jqm-header.ui-header-fixed.ui-fixed-hidden > .ui-btn-icon-notext {
	top: 1.1em;
}
.jqm-header .jqm-navmenu-link {
	left: 15px;
}
.jqm-header .jqm-search-link {
	right: 15px;
}
.jqm-header > .ui-btn,
.jqm-header > .ui-btn .ui-btn-inner {
	border: none;
	background: none;
}
.jqm-header > .ui-btn,
.jqm-header > .ui-btn .ui-icon {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
/* Custom icons */
.jqm-header > .ui-btn .ui-icon {
	background-image: url(jqm_demo-icons-sd.png);
	background-color: transparent;
	width: 31px;
	height: 31px;
	margin: 0;
}
.jqm-header .jqm-navmenu-link .ui-icon {
	background-position: -3px 50%;
}
.jqm-header .jqm-search-link .ui-icon {
	background-position: -100px -2px;
}
/* Toggle search / close icon */
.jqm-search-toggle .jqm-search-link .ui-icon {
	background-position: -51px -2px;
}
/* Toggle menu bars / close icon on small screens */
@media (max-width:45.9375em)...

JavaScript

$(document).on("pageinit", function() {
			var nextId = 1;

			$("#add").click(function() {
				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").trigger( "expand" );
			});

			$("#collapse").click(function() {
				$("#set").children(":last").trigger( "collapse" );
			});
		});