Add a "Split button" in collapsible-set (JQuery Mobile) - jquery-mobile

Question

Is there are any way to add the split button (that comes with ListView) to the collapsible; I have tried/tested the below code, but doesn't work!
<div data-role="collapsible-set" data-theme="a" data-content-theme="e" data-split-icon="gear" data-split-theme="e">
<div data-role="collapsible">
<h3> Breakfast </h3>
<p>
<a href="somthing.html"> the contents comes here.
</a>
</p>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">
split button 2
</a>
</div>
<div data-role="collapsible">
<h3> Lunch</h3>
<p>
<a href="somthingElse.html"> the contents comes here.
</a>
</p>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">
split button 2
</a>
</div>
</div>
Any Idea or any other solution (workaround) is highly welcome.

Answer 1

Well it needs a little work but here is what I have
Live Example:
http://jsfiddle.net/yPhJp/5/
http://jsfiddle.net/yPhJp/6/ ( Adding verbiage to the collapsible )
JS
$(".splitButtonClicked").on("click", function (event, ui) {
alert('Hello');
return false; // stop collapsible event
});
HTML
<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>View Menu
</li>
</ul>
</h2>
</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>View Menu
</li>
</ul>
</h2>
</div>
</div>
</div>
</div>
Hope this helps you