jQuery Mobile - Make only certain part of collapsible widget active

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.

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