jQuery Mobile - Make only certain part of collapsible widget active - jquery-mobile

Question

does anyone know of a way to make only a certain part of a collapsible widget actually toggle the collapsible part? I have been trying to figure this out for hours and can't seem to get it.
Basically, I don't want a whole <li> to trigger the expand/collapse, but only a small area on the right.
Thanks.

Answer 1

This is my solution:
block default events
create a clickable element on the right side
manage expand/collapse status
HTML
<div data-role="page" id="page">
<div data-role="content">
<div data-role="collapsible" data-inset="false" data-collapsed="true">
<h1>Title <span class="clickme">Click me</span></h1>
<h5>Content</h5>
</div>
<div data-role="collapsible" data-inset="false" data-collapsed="true">
<h1>Title <span class="clickme">Click me</span></h1>
<h5>Content</h5>
</div>
<div data-role="collapsible" data-inset="false" data-collapsed="true">
<h1>Title <span class="clickme">Click me</span></h1>
<h5>Content</h5>
</div>
</div>
</div>
JavaScript
$(document).on("pagecreate", "#page", function()
{
$("[data-role=collapsible] a").on("click", function()
{
event.preventDefault();
event.stopPropagation();
});
$(".clickme").on("click", function()
{
var element = $(this).closest("[data-role=collapsible]");
if (element.attr("data-collapsed") == "true")
{
element.attr("data-collapsed", "false");
element.collapsible("expand");
}
else
{
element.attr("data-collapsed", "true");
element.collapsible("collapse");
}
});
});
JSFiddle

Answer 2

So there were a few things I was doing incorrectly, helpfully pointed out by Sga.
You can't use vclick. For whatever reason, this jQM plugin isn't using an established jQM event to handle it's stuff. I was previously listening to the vclick event:
$parent.on('vclick', '[data-role=collapsible] a', function() {});
You can't bind the thing you want to prevent default on on a parent. For example:
$parent.on('click', '[data-role=collapsible] a', function() {});
That doesn't work, you have to bind it after the elements are rendered a la:
$('.collapse-target', $list).on('click', function() {});
After doing all that, which totally isn't optimal, I was able to achieve the effect I wanted. It's too bad this feature wasn't included out of the box for the collapsible widget. Hopefully this helps someone.