Question

Im using the jQuery Mobile search filter with dividers:
http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html

I need the dividers to collapse and uncollapse the list items below them when clicked, like the examples here: http://jquerymobile.com/test/docs/content/content-collapsible.html

I know jQuery Mobile can handle collapsable divs easily but can it be combined with my list or do I need to write some custom jQuery to do this?

Answer 1

Not sure if you have solved the problem. But I have something which worked for me as follows. This is my first time answering question here. I have benefited a lot from this forum, so feel should give back if I can.

This is my first time doing Jquery Mobile, so the solution may not be the best. But it works for me:

// Build up the divider programatically.
var listHTML = "<ul data-role='listview' data-filter='true'";
listHTML += "<li data-icon='arrow-u'  class='ui-btn-icon-left'>";
listHTML += "<a class='cl-CategoryDivider' id= 'id-Category";
listHTML += categoryCounter;
listHTML += "' > ";
listHTML += CategoryName;
listHTML += "</a>";                         
listHTML += "</li>";                            

// The listview must have this class
listHTML += "<li class='cl-Category";
listHTML += categoryCounter;
listHTML += "'> ";

.......................

Then, have the following code to handle the clicking of the divider to collapse and uncollapse the items under that divider:

$('.cl-CategoryDivider').live ("click", function (event)
{   
var ID = this.id.substring(this.id.indexOf("y")+1,this.id.length);
var $span = $(this).parents("li").find ("span.ui-icon");
if ($span.hasClass ("ui-icon-arrow-u")) 
{
    $(".cl-Category"+ID).hide();
    $span.removeClass ("ui-icon-arrow-u");
    $span.addClass ("ui-icon-arrow-d");
} else {
    if ($span.hasClass ("ui-icon-arrow-d")) 
    {
        $(".cl-Category"+ID).show();
        $span.removeClass ("ui-icon-arrow-d");
        $span.addClass ("ui-icon-arrow-u");
    }
}
});

Hope it helps.