jQuery Mobile - Make only certain part of collapsible widget active

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.

1. 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() {});

2. 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.