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" 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>

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'));
    });