JSFiddle - React, Tailwind, and code Playground

by Cat_Turbo

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="content">
        <div data-role="collapsible" data-theme='b' data-content-theme='d' data-collapsed='true' class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed doublemeaning" data-enhanced="true">
             <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
	<a class="myheading ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus" href="#">Title</a>
	<a class="click_action ui-btn ui-btn-icon-notext ui-icon-delete ui-corner-all " data-enhanced="true"  data-rel="back">New Page HTML</a>
    </h3>

            <ul data-role="listview" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
                <li>test 1</li>
                <li>test 2</li>
            </ul>
        </div>
        <div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b" style="max-width:100%; padding:1px;">
             <h3>Purchase Album?</h3>

            <p>Your download will begin immediately on your mobile device when you purchase.</p> <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">Buy: $10.99</a>
 <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Cancel</a>

        </div>
    </div>
</div>

CSS

.ui-collapsible-inset .ui-collapsible-heading .ui-btn.click_action {
    position: absolute;
    top: 0;
    right: 1px;
    height: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    border-width: 0px;
    margin-top: -1px;
    margin-bottom: -1px;
}

JavaScript

$(".click_action").bind("click", function (e) {
        console.log('clicked');
        e.stopPropagation();
        e.preventDefault();
        e.stopImmediatePropagation();
        console.log('Should now go to: ' + $(this).attr('href'));
        $('#purchase').popup('open', {
            transition: "pop",
            positionTo: "window",
        });
    });