Question

I’m trying to combine a collapsible list with a normal list, such as:

Link 1 (header)
Link 2 (header)
List header
    Link 3
    Link 4
Link 5 (header)
List header
    Link 6
    Link 7
Link 8 (header)

The thing is that when I add the link to the header:

<h3>
    <a href="link.php">My link</a>
</h3>

jQuery Mobile turns it into something like this:

<a href="#">
    <span class="ui-btn-inner>
        <span class="ui-btn-text">
            <a href="link.php" class="ui-link">My link</a>
        </span>
    </span>
</a>

And this doesn’t allow for the behaviour I want to take place. I basically want a mix list, with both collapsible items as well as with links, on the same top level. I’d greatly appreciate it if anyone could help me with this.

Answer 1

Ok, so I found out how to do this and it’s quite a pretty solution. Inside the H3 of the collapsible block, just add the link as you normally would and give it a custom class name:

<div data-role="collapsible" data-allow-collapse="false">
    <h3>
        <a href="link.php" class="collapsible-header-link">My link</a>
    </h3>
</div>

… and then just trigger a page change for the given URL using jQuery Mobile’s changePage() function:

$("#my_page").live('pageinit', function (event) {
    $(".ui-collapsible-heading-toggle").bind("click", function (e) {
        var $link = $(this).find('.collapsible-header-link');
        if ($link.length > 0)
            $.mobile.changePage($link.attr('href'));
    });
});

You can add such links on as many headers as you want and it will work flawlessly. Hope this will help other having this issue. Cheers!