JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0/css/themes/default/jquery.mobile-1.2.0.css">
<script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.js"></script>
<div data-role="page" id="home">
<div data-role="content">
<div data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div data-role="collapsible">
<h2>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="#">
<h3>Breakfast</h3>
</a><a href="#breakfast_menu" data-rel="popup" data-position-to="window" data-transition="pop" class="splitButtonClicked">View Menu</a>
</li>
</ul>
</h2>
<p>Hello Breakfest</p>
</div>
<div data-role="collapsible">
<h2>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="#">
<h3>Lunch</h3>
</a><a href="#lunch_menu" data-rel="popup" data-position-to="window" data-transition="pop" class="splitButtonClicked">View Menu</a>
</li>
</ul>
</h2>
<p>Hello Lunch</p>
</div>
</div>
</div>
</div>
<!-- -->
<div data-role="page" id="breakfast_menu">
<div data-role="content">
I am the Breakfest Menu
</div>
</div>
JavaScript
$(".splitButtonClicked").on("click", function (event, ui) {
alert('Hello');
return false; // stop collapsible event
});