JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.css">
<div data-role="page" id="page1"> 
<div data-role="collapsible" 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="#">Heading</a>
	<a class="click_action ui-btn ui-btn-icon-notext ui-icon-gear ui-corner-all " data-enhanced="true" href="test2.html">Go to test2.html</a>
    </h3>
    <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
         <p>I'm the collapsible content. Open me!</p>
    </div>
</div>

</div>
</body>
</html>

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'));
      $.mobile.changePage($(this).attr('href'));
    });